Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
: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.
/* 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
:has-slotted {
/* ... */
}
Beispiele
Dieses Beispiel enthält zwei <slot>-Elemente, von denen einem Inhalt zugewiesen wurde und dem anderen nicht.
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
Loading...
Siehe auch
- HTML
<template>-Element - HTML
<slot>-Element ::slotted