::slotted() CSS Pseudo Element

The ::slotted() pseudo-element in CSS is used in conjunction with the slot attribute to style elements that are passed into a shadow DOM from the light DOM. In other words, it allows authors of a web component to target and apply styles to children that are slotted into the shadow DOM, without breaking encapsulation. This pseudo-class is a critical tool for maintaining design consistency within shadow DOM components while still allowing flexibility for content insertion.

When using ::slotted(), you must provide a simple selector inside the parentheses, such as a type selector, class selector, or ID selector. Complex selectors like combinators or descendant selectors are not allowed. For example, to style all p elements passed into a slot, you would write:

::slotted(p) {
  color: blue;
  font-weight: bold;
}

This ensures that any p elements inserted into the slot adopt the specified styles, regardless of where they originate in the light DOM. Similarly, you can target elements by class:

::slotted(.highlight) {
  background-color: yellow;
  border-radius: 5px;
}

It’s important to note that ::slotted() applies styles only to the slotted element itself, not to its descendants. For instance, if a slotted element contains nested span elements, you cannot style the nested span elements using ::slotted() directly. This restriction preserves the encapsulation that the shadow DOM provides.

Another practical aspect of ::slotted() is that it allows component developers to provide default styling for expected light DOM content while still giving authors of the light DOM flexibility to override these styles outside the shadow DOM if needed. This balances encapsulation and flexibility, which is one of the core advantages of using Web Components.

Example with a shadow DOM component:

<my-card>
  <p>Slotted paragraph</p>
  <button class="cta">Click me</button>
</my-card>

<script>
  const template = document.createElement('template');
  template.innerHTML = `
    <style>
      ::slotted(p) {
        color: red;
        font-size: 18px;
      }
      ::slotted(.cta) {
        padding: 10px 20px;
        background-color: green;
        color: white;
      }
    </style>
    <slot></slot>
  `;

  class MyCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.appendChild(template.content.cloneNode(true));
    }
  }

  customElements.define('my-card', MyCard);
</script>

In this example, any p or element with the class cta inserted into the slot will adopt the specified styles defined by ::slotted(), demonstrating how this pseudo-class allows controlled styling of projected content.