::slotted() pseudo-element ​

The ::slotted() pseudo-element let's you shallowly target slotted elements.

:slotted(p) {
  background: pink;
}

:slotted(p) {
  background: pink;
}

This example would turn all direct child <p> elements slotted inside the custom element.

<example-element>
  <p>I'm pink</p>
  <div>
    <p>I'm not pink</p>
  </div>
</example-element>

<example-element>
  <p>I'm pink</p>
  <div>
    <p>I'm not pink</p>
  </div>
</example-element>

Example ​

Resources ​

• MDN
• ShadowDOM v1