:host
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Please take two minutes to fill out our short survey.
La pseudo-classe :host permet de cibler l'hôte d'un 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.
/* Cible la racine d'un hôte de shadow DOM */
:host {
font-weight: bold;
}
Syntaxe
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 |