3 ms·
Shadow DOM works well for this if you need true encapsulation. A blend of shadow and light DOM in web components solves most of the issues I've run into over t
by claytongulick 4y ago
Shadow DOM works well for this if you need true encapsulation.
A blend of shadow and light DOM in web components solves most of the issues I've run into over the years.
It's also easy to scope styles to a custom component in the light dom with:
my-component .header {...}
I do this a lot in light DOM web components and render the styles with lit-html as part of a template.
- quechimba 4y agoThere is also the ::part() selector now which is quite useful for selecting things within a shadow. https://shoelace.style/ https://shoelace.style/ uses parts for styling individual parts within custom elements.
- claytongulick 4y agoIn practice, I've found that to be pretty unwieldy and difficult to use. My general approach is to keep most application level components in the light dom for styling, and only use shadow dom for library-like components, mostly layouts for slotting light dom stuff.