: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 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  element that has content that is not default  */
:has-slotted {
  color: green;
}

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

Syntax

css

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

Examples

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

HTML

html


  
  Slotted content

Result

The 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