:has-slotted
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; }
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| | | 136 | | | | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
slot:has-slotted {
border: 1px solid blue;
padding: 8px;
}
slot:not(:has-slotted) {
color: gray;
}Live demo
Use cases
-
Using :has-slotted
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).
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.