Pseudo-classe CSS `:has-slotted`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Want more support for this feature? Tell us why.

En savoir plus
Voir la compatibilité complète

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>