3 ms·
Take a look at CSS shadow parts. It allows you to mark which part of the shadow dom are stylable which you can then access using the ::part() pseudo element. A
by runarberg 6y ago
Take a look at CSS shadow parts. It allows you to mark which part of the shadow dom are stylable which you can then access using the ::part() pseudo element.
Another handy thing to know is that exportparts reexports parts from a nested web component, and CSS --custom-properties will cascade down into the shadow dom
https://developer.mozilla.org/en-US/docs/Web/CSS/::part https://developer.mozilla.org/en-US/docs/Web/CSS/::part
- deergomoo 6y agoI didn't know about that and it is certainly interesting, however for my particular use case it wouldn't have worked unfortunately. I was using Tailwind, so rather than targeting specific components from a global style sheet, I was trying to use the utility classes from the global sheet inside a web component.
- runarberg 6y agoAhh yes. I believe the tailwind workflow is incompatible with the component scoped styles which web component forces. I believe however that when you use components scoped styles (whether through the shadow dom, React’s styled components, Vue’s single file components, etc) tailwind becomes obsolete (or rather the wrong tool for the job).