:has-slotted
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La pseudo-classe CSS :has-slotted correspond lorsque le contenu d'un élément <slot> n'est pas vide ou n'utilise pas la valeur par défaut (voir Utilisation des modèles et des slots pour plus d'informations).
Note :
Même un seul nœud de texte blanc suffit pour que :has-slotted s'applique.
Cela ne fonctionne que lorsqu'il est utilisé dans CSS placé dans un DOM sombre (shadow DOM).
css
/* Sélectionne le contenu d'un élément <slot> qui a un contenu qui n'est pas par défaut */
:has-slotted {
color: green;
}
/* Sélectionne le contenu d'un élément <slot> qui n'a pas de contenu ou qui utilise la valeur par défaut */
:not(:has-slotted) {
color: red;
}
Syntaxe
css
:has-slotted {
/* ... */
}
Exemples
Cet exemple a deux éléments <slot>, dont l'un a été assigné à un contenu et l'autre ne l'a pas été.
HTML
html
<p>
<template shadowrootmode="open">
<style>
:has-slotted {
color: rebeccapurple;
}
</style>
<slot name="one">Emplacement 1</slot>
<slot name="two">Emplacement 2</slot>
</template>
<span slot="one">Contenu assigné</span>
</p>
Résultat
L'élément <slot> qui a été assigné à un contenu a correspondu à la pseudo-classe :has-slotted et a reçu la valeur color de rebeccapurple.
Spécifications
| Specification |
|---|
| CSS Scoping Module Level 1 # the-has-slotted-pseudo |
Compatibilité des navigateurs
Chargement…
Voir aussi
- L'élément HTML
<template> - L'élément HTML
<slot> ::slotted