3 ms·
It's fairly easy to choose between style isolation and no style isolation though. Just change the `this.shadow.innerHTML` in the render to `this.innerHTML`. The
by jjcm 3y ago
It's fairly easy to choose between style isolation and no style isolation though. Just change the `this.shadow.innerHTML` in the render to `this.innerHTML`. The encapsulation aspect provides some really nice benefits in many scenarios, so having the option of this is quite nice.
A classic example of why this is beneficial is when creating design system components - you typically want these to not be affected by styling on the page, and if you do want them to be styled, you only want them to be styled in specific ways which you can build in via css custom property values (see the accent example the author provides).
- gedy 3y ago> you typically want these to not be affected by styling on the page, and if you do want them to be styled, you only want them to be styled in specific ways which you can build in via css custom property values Ironically, this proves my point about opinions a bit - our design system is themeable and needs to cover a number of technologies and we want to inherit the app's CSS, not embed the styles or have to specify colors on every component.
- jjcm 3y agoThere's a strong difference between styles and themes. Theming is quite easy with web components, as long as you have a semantic layer to your design tokens. Since custom properties do cascade, it's quite easy to automatically switch themes while still preventing css-selector clobber issues with styles. If you're curious on this approach, my site non.io has light/dark theming via this method, and Figma's light/dark mode was loosely based on this approach.