CSS-Pseudoklasse `:has-slotted`

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Pseudoklasse :has-slotted trifft zu, wenn der Inhalt eines <slot>-Elements nicht leer ist oder nicht den Standardwert verwendet (weitere Informationen finden Sie unter Vorlagen und Slots verwenden).

Hinweis: Bereits ein einzelner Textknoten, der nur aus einem Leerzeichen besteht, reicht aus, damit :has-slotted zutrifft.

Dies funktioniert nur innerhalb von CSS, das sich in einem 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. Einem davon wurde Inhalt zugewiesen, dem anderen nicht.

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, entspricht der Pseudoklasse :has-slotted. Deshalb wird darauf der color-Wert rebeccapurple angewendet.