Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:has-slotted
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Lapseudo-classeCSS:has-slotted correspond lorsque le contenu d'un élément<slot> n'est pas vide ou n'utilise pas la valeur par défaut (voirUtilisation 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 unDOM sombre (shadow DOM).
/* 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
: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
<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 valeurcolor derebeccapurple.
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> ::slotted