stenciljs - Stencil dev 构建样式问题

Question

我们最近进行了模板升级，并在 prod 构建包（模板构建）中发现了样式问题。使用 --dev 参数（模板构建 --dev）进行构建时工作正常。

我做了更多的研究，发现了样式标签的区别。在开发版本中，我可以看到样式标签出现在我的影子 dom 下，因为它出现在模板以前的版本（0.15.x）中。但是在 prod 构建包中，样式标签丢失但样式正在被应用。我可以理解模板正在禁用在产品构建中修改的样式。但是行为不应该改变。

代码示例

模板构建结果 -

模板构建--dev

Answer 1

IMO，您看到的行为--prod是正确的 ---dev是错误的。除非直接应用于阴影的元素（样式属性），否则属于宿主的样式应该胜过任何其他影响阴影的样式。如果您使用:host选择器作为样式定义的根my-component.scss（我认为这是推荐的，但文档很少），--dev其行为将与--prod.

自 0.15.x 以来，水合物发生了变化，这可能与您注意到的行为变化有关。所以我同意这是一个问题/错误，但我认为问题与--dev不--prod使用:host组件样式中的选择器有关。