: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 Vorlagen und Slots für weitere Informationen).

Hinweis: Sogar ein einzelnes Leerzeichen als Textknoten reicht aus, damit :has-slotted angewendet wird.

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

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 einem Inhalt zugewiesen wurde und 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

Dem <slot>-Element, dem Inhalt zugewiesen wurde, trifft die :has-slotted Pseudoklasse zu und hat den color-Wert von rebeccapurple angewendet.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

HTML <template>-Element
HTML <slot>-Element
::slotted

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden