: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.

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.

css
/* Cible la racine d'un hôte de shadow DOM */
:host {
  font-weight: bold;
}

Syntaxe

Error: could not find syntax for this item

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 :

html
<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 :

js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:host

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi