So, You Want to Encapsulate Your Styles? – Nathan Knowler
The Shadow DOM allows us to encapsulate our styles. What does that mean?
Source: So, You Want to Encapsulate Your Styles
- Elements within a shadow tree are isolated and cannot be selected by styles set outside of the tree.
- Styles set for the shadow tree are scoped to the elements within the tree.
The Shadow DOM provides a mechanism for encapsulating an element so the CSS from its containing page aren’t inherited into it, no do the styles defined inside the Shadow DOM spill out into the containing document.
But new CSS features like cascade layers and scope can help isolate CSS even without the need for the Shadow DOM as Nathan Knowler describes.
