: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
Placeholder 1
Placeholder 2
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 |
Browser compatibility
See also
- HTML
element
- HTML
element ::slotted