Stencil dev build styling issue
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.
stencil build results -
stencil build --dev
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.
- Font Awesome doesn't work inside of a Stencil JS component
- How to apply the remaining props that are passed into component and aren't declared with the @Prop decorator?
- How to enable top-level await in typescript/node/stencil js/jsx
- EsLint won't recognise my Web Components extended HTMLElement interfaces
- Glitchy Scroll Behavior on Mozilla Firefox Browser
- How to add a nav link in the section "My account"
- How to test disabled attribute of a button?
- Import StencilJs generated web-component in Astro
- Storybook web-components: sending array as component property
- StencilJS Component - Passing an Array of Objects as Prop into Component
- stenciljs all in one bundle with webpack o rollup
- React component does not infer children in StencilJS
- Stenciljs Intercepting the removal of a component if the user does not confirm
- How to initialize ionics "auto-lazy loading" stencil components properly?
- Stencil JS globalscript is not completing before app loads
- Is there a way to make a Stencil.js web component automatically insert itself into the DOM without user interaction?
- How to target an element inside a shadow DOM from another web component wrapped inside it
- How to import a string into my .tsx file from module with a relative reference?
- Hot reload broken with StencilJS and Storybook 7
- Override WinJS promises with native promises as a Chrome Extension content script?
- Stenciljs throwing build error from @types/babel__traverse package after fresh install
- Ember 5.1 with ember-cli-stencil and third party components not working
- <li> elements must be contained in a <ul> or <ol> in Stenciljs
- puppeteer: type inside input field which is in multiple shadowRoot's
- Is there an issue with querying the shadow DOM of another component in StencilJS?
- Is highchart rendered in dom when the data passes to it is incorrect?
- Jest Mock IntersectionObserver
- When to use a mutable Prop decorator vs when to use a State decorator
- How to style child elements inside a slotted parent?
- Stencil.js Jest: mock FileReader 'not defined' unless use window.FileReader