: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.
/* 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 eines mit Inhalt belegt ist, während das andere keinen Inhalt hat.
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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
- HTML-Element
<template>
- HTML-Element
<slot>
::slotted