So, You Want to Encapsulate Your Styles? – Nathan Knowler

May 1, 2024

The Shadow DOM allows us to encapsulate our styles. What does that mean?

  1. Elements within a shadow tree are isolated and cannot be selected by styles set outside of the tree.
  2. Styles set for the shadow tree are scoped to the elements within the tree.
Source: So, You Want to Encapsulate Your Styles

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.