:has-slotted

Limited availability

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

Die :has-slotted CSS-Pseudoklasse trifft zu, wenn der Inhalt eines <slot>-Elements nicht leer ist oder nicht den Standardwert verwendet (siehe Verwendung von Templates und Slots für weitere Informationen).

Hinweis:Selbst ein einzelner Leerzeichentextknoten reicht aus, damit:has-slotted anwendbar ist.

Dies funktioniert nur, wenn es innerhalb von CSS verwendet wird, das sich im Shadow DOM befindet.

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 {
  /* ... */
}

Beispiele

Dieses Beispiel enthält zwei <slot>-Elemente, von denen eines mit Inhalt belegt ist, während das andere keinen Inhalt hat.

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>

Ergebnis

Das <slot>-Element, dem Inhalt zugewiesen wurde, erfüllt die Bedingungen der :has-slotted-Pseudoklasse und hat den color-Wert rebeccapurple angewendet bekommen.

Spezifikationen

Specification
CSS Scoping Module Level 1
# the-has-slotted-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:has-slotted

Legend

Tip: you can click/tap on a cell for more information.

In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support

Siehe auch