:has-slotted

Matches a 'slot' in the Shadow DOM if it contains content that matches the selector. It's used within Web Components to style slots based on what's been put inside them.

Quick example

/* Styles the slot if it has an image inside it */
::slotted(div):has-slotted(img) {
  border: 4px solid blue;
}

:has-slotted Browser Support

Limited availability 2% global usage

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

Not ready for production without a fallback.

136+
ESC