Stencil dev build styling issue

Question

We have done stencil upgrade recently and found styles issues in prod build package (stencil build). It is working fine when doing build with --dev parameter (stencil build --dev).

I have done more research and found the difference in style tag. In dev build I can see the style tag is coming under my shadow dom as it was coming in stencil previous version(0.15.x). But In prod build package, style tag is missing but styles is getting applied. I can understand stencil is disabling styles to be modified in prod build. But behaviour should not be changed.

Code Sample

stencil build results -

stencil build --dev

Answer 1

IMO, the behavior you see for --prod is correct - --dev is wrong. The styling that belongs to the host should win out over any other style affecting the shadow unless applied to the shadow's elements directly (style attribute). If you use the :host selector as the root of your style definitions in my-component.scss (which is recommended I think, but documentation is minimal), --dev will behave the same as --prod.

There have been hydrate changes since 0.15.x that may have something to do with the behavior change you have noted. So I agree this is an issue/bug, but I think the problem is with --dev not --prod and related to not using the :host selector in the component style.