Stencil 开发构建样式问题

Question

我们最近进行了模板升级，发现产品构建包 (stencil build) 中存在样式问题。使用 --dev 参数构建时工作正常 (stencil build --dev)。

我做了更多的研究，发现了样式标签的不同。在开发版本中，我可以看到样式标签出现在我的阴影下 dom，因为它出现在模板先前版本 (0.15.x) 中。但是在 prod 构建包中，缺少样式标签，但正在应用样式。我可以理解模板禁止在产品构建中修改样式。但行为不应改变。

Code Sample

模板构建结果 -

模板构建--dev

Answer 1

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

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