`:has-slotted` CSS pseudo-class

Limited availability

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

See full compatibility

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 Shadow Module Level 1 # the-has-slotted-pseudo

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`:has-slotted`	Chrome – No support Chrome footnote No support	Edge – No support Edge footnote No support	Firefox – Full support Firefox 136 (Release date: 2025-03-04) footnote Full support	Opera – No support Opera footnote No support	Safari – No support Safari footnote No support	Chrome Android – No support Chrome Android footnote No support	Firefox for Android – Full support Firefox for Android 136 (Release date: 2025-03-04) footnote Full support	Opera Android – No support Opera Android footnote No support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – No support Samsung Internet footnote No support	WebView Android – No support WebView Android footnote No support	WebView on iOS – No support WebView on iOS footnote No support

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

Full support: Full support
No support: No support

:has-slotted CSS pseudo-class