: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 pseudo-classe CSS :host permet de cibler l'hôte d'un DOM sombre (shadow DOM) contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (custom element) depuis l'intérieur du shadow DOM.
Note : Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un shadow DOM.
Exemple interactif
/* Ce CSS est appliqué à l'intérieur du shadow DOM. */
:host {
background-color: aqua;
}
<h1 id="shadow-dom-host"></h1>
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 */
:host {
font-weight: bold;
}
Syntaxe
:host {
/* ... */
}
Exemples
Les fragments de code qui suivent sont extraits du dépôt d'exemple host-selectors (voir le résultat live).
Dans cet exemple, on dispose d'un élément personnalisé <context-span> qui peut contenir du texte :
<h1>
Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
Pour le constructeur de cet élément, on crée des éléments style et span : l'élément span recevra le contenu de l'élément personnalisé et style recevra quelques règles CSS :
let style = document.createElement("style");
let 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: " - no links in headers!" }' +
":host-context(article, aside) { color: gray; }" +
":host(.footer) { color : red; }" +
":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
La règle :host { background: rgba(0,0,0,0.1); padding: 2px 5px; } permet de cibler l'ensemble des instances de <context-span> (qui est l'hôte ici) dans le document.
Spécifications
| Specification |
|---|
| CSS Scoping Module Level 1 # host-selector |
Compatibilité des navigateurs
Chargement…