: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>