:host()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La fonction de pseudo-classe CSS :host() permet de sélectionner l'hôte du DOM sombre (shadow DOM) contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.
Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction :host(). Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser :host-context().
Note :
Alors que d'autres pseudo-classes fonctionnelles telles que :is() et :not() acceptent une liste de sélecteurs comme paramètres, :host() prend un seul sélecteur composé comme paramètre. De plus, alors que :is() et :not() ne prennent en compte que la spécificité de leur argument, la spécificité de :host() est à la fois la spécificité de la pseudo-classe et la spécificité de son argument.
Exemple interactif
/* Le CSS suivant est appliqué à l'intérieur du shadow DOM. */
:host(h1) {
color: red;
}
:host(#shadow-dom-host) {
border: 2px dashed blue;
}
<!-- éléments en dehors du shadow DOM -->
<div id="container">
<h1 id="shadow-dom-host"></h1>
</div>
const shadowDom = init();
// ajouter un élément <span> dans le shadow DOM
const span = document.createElement("span");
span.textContent = "À l'intérieur du shadow DOM";
shadowDom.appendChild(span);
// attacher le shadow DOM à l'élément #shadow-dom-host
function init() {
const host = document.getElementById("shadow-dom-host");
const shadowDom = host.attachShadow({ mode: "open" });
const cssTab = document.querySelector("#css-output");
const shadowStyle = document.createElement("style");
shadowStyle.textContent = cssTab.textContent;
shadowDom.appendChild(shadowStyle);
cssTab.addEventListener("change", () => {
shadowStyle.textContent = cssTab.textContent;
});
return shadowDom;
}
/* Sélectionne un hôte de shadow root, uniquement s'il est
correspondant au sélecteur passé en argument */
:host(.special-custom-element) {
font-weight: bold;
}
Syntaxe
:host(<compound-selector>) {
/* ... */
}
Exemples
Sélection de styles pour les hôtes de shadow
Les fragments de code suivants sont extraits du dépôt d'exemple host-selectors (voir le résultat en direct).
Dans cet exemple, on dispose d'un élément personnalisé, <context-span>, qui peut contenir du texte :
<h1>
Sélecteurs d'hôte <a href="#"><context-span>exemple</context-span></a>
</h1>
Dans le constructeur de l'élément, on crée un élément style et un élément span. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément style recevra quelques règles CSS :
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);
style.textContent =
"span:hover { text-decoration: underline; }" +
":host-context(h1) { font-style: italic; }" +
':host-context(h1)::after { content: " - pas de liens dans les en-têtes !" }' +
":host-context(article, aside) { color: gray; }" +
":host(.footer) { color : red; }" +
":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
La règle :host(.footer) { color : red; } s'applique à toutes les instances de l'élément <context-span> (il s'agit ici de l'hôte) du document qui possèdent la classe footer. Ici, pour ces éléments donnés, on utilise une couleur spécifique.
Spécifications
| Specification |
|---|
| CSS Scoping Module Level 1 # host-selector |
Compatibilité des navigateurs
Chargement…