Stencil: Styles not scoped by default in Stencil components?

[motss]

I expect styles from each component should be scoped by default. I know that this is something achievable by Shadow DOM but hoping to see some sort of scoping styles by default.

[ryan-edge-ck]

From what I understand, shadow dom is not enabled by default. You could probably add style scoping by using a css-in-js or css module solution (similarly to how you would do in React) or you could enable shadow in the decorator:

@Component({
    tag: 'my-first-component',
    shadow: true
})

[jgw96]

Hello all! So this is something we need to add to our docs (and that i will open an issue for) but to scope your styles by default in stencil components you would wrap your styles with the tag name of the component. So for example here https://github.com/ionic-team/ionic-stencil-hn-app/blob/master/src/components/news-list/news-list.scss#L1 you can see i have wrapped my styles for that component in the tag name of the component. Thanks for using Stencil!

[jgw96]

Also, its worth mentioning that we do support shadow dom, but we do not totally recommend using it just yet. (:

[motss]

@jgw96 The link to the example is not working. I'm interested in knowing to do it in Stencil.

[bitflower]

Hey, love Stencil ;-)

Any plans on implementing something in the direction of CSS-in-JS (e.g. JSS)?