:has-slotted

Limited availability

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

The:has-slottedCSS pseudo-class matches when the content of a<slot> element is not empty or not using the default value (seeUsing 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 ashadow 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>