:host
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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
Loading…