:has-slotted

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The :has-slotted CSS pseudo-class matches when the content of a <slot> element is not empty or not using the default value (see Using templates and slots for more information).

Note:Even a single whitespace text node is sufficient to make:has-slotted apply.

This only works when used inside CSS placed within a shadow DOM.

css
/* Selects the content of a <slot> element that has content that is not default  */
:has-slotted {
  color: green;
}

/* Selects the content of a <slot> element that has no content or default  */
:not(:has-slotted) {
  color: red;
}

Syntax

css
:has-slotted {
  /* ... */
}

Examples

This example has two <slot> elements, one of which has been assigned some content and the other has not.

HTML

html
<p>
  <template shadowrootmode="open">
    <style>
      :has-slotted {
        color: rebeccapurple;
      }
    </style>
    <slot name="one">Placeholder 1</slot>
    <slot name="two">Placeholder 2</slot>
  </template>
  <span slot="one">Slotted content</span>
</p>

Result

The <slot> element that has been assigned content matched the :has-slotted pseudo-class and has the color value of rebeccapurple applied.

Specifications

Specification
CSS Scoping Module Level 1
# the-has-slotted-pseudo

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:has-slotted

Legend

Tip: you can click/tap on a cell for more information.

In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support

See also