: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
Voir aussi
- L'élément HTML
<template> - L'élément HTML
<slot> - La pseudo-classe
::slotted