: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 einzelnes Leerzeichen-Textknoten reicht aus, damit :has-slotted zutrifft.
Dies funktioniert nur, wenn es innerhalb von CSS verwendet wird, 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 hat 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
Das <slot>-Element, dem Inhalt zugewiesen wurde, entspricht der :has-slotted-Pseudoklasse und hat den color-Wert rebeccapurple zugewiesen bekommen.
Spezifikationen
| Specification |
|---|
| CSS Scoping Module Level 1 # the-has-slotted-pseudo |
Browser-Kompatibilität
Siehe auch
- HTML
<template>-Element - HTML
<slot>-Element ::slotted