Unveiling the ::content/:slotted Pseudo-Element in Shadow DOM

The Shadow DOM, a critical aspect of Web Components, introduces a novel way of encapsulating and separating content. Within this realm, the ::content (formerly known as ::slotted) pseudo-element plays a pivotal role in enabling deep styling of distributed nodes within a ShadowTree.

Introducing ::content

The ::content pseudo-element is a selector that applies to nodes distributed inside an element. It operates alongside the (now ) tag to facilitate the insertion of content from the LightDOM into the ShadowDOM.

Targeting Distributed Nodes

When elements are moved from their original position in the markup to another location within the ShadowTree, they become distributed nodes. ::content allows for the specific targeting of these distributed nodes, providing a way to apply styles that are exclusive to their new location.

Example

Consider the following code snippet:

#slides::content img {
    width: 25%;
    float: left;
}

Here, the ::content selector is used to target distributed images within the #slides element. The styles applied to these images will only affect the copies present in the ShadowDOM, providing isolation from the LightDOM.

Conclusion

The ::content (or ::slotted) pseudo-element is an indispensable tool in the Shadow DOM, giving web developers the flexibility to deeply style distributed nodes without interfering with elements in the LightDOM. This enables encapsulation and separation of concerns, enhancing the overall maintainability and flexibility of web applications.