: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 d'ombre (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 DOM d'ombre.

Note : Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un DOM d'ombre.

Exemple interactif

/* Ce CSS est appliqué à l'intérieur du DOM d'ombre. */

:host {
  background-color: aqua;
}

<h1 id="shadow-dom-host"></h1>

const shadowDom = init();

// ajouter un élément <span> dans le DOM d'ombre
const span = document.createElement("span");
span.textContent = "À l'intérieur du DOM d'ombre";
shadowDom.appendChild(span);

// attacher le DOM d'ombre à 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;
}

css

/* Sélectionne un hôte de la racine d'ombre */
:host {
  font-weight: bold;
}

Syntaxe

css

:host {
  /* ... */
}

Exemples

Les fragments de code qui suivent sont extraits du dépôt d'exemple host-selectors ^(angl.) (voir le résultat en direct ^(angl.)).

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>

Dans le constructeur de l'élément, nous créons des éléments style et span, nous remplissons le span avec le contenu de l'élément personnalisé, et nous remplissons l'élément style avec 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: " - 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 Shadow Module Level 1 # host-selector

Compatibilité des navigateurs

Voir aussi

Les composants web
La fonction de pseudo-classe :host()
La fonction de pseudo-classe :host-context()
Le pseudo-élément ::slotted
La fonction de pseudo-classe :state()
Le module de portée CSS

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 7 mars 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content