:host-context()

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.

La fonction de pseudo-classe CSS :host-context() sélectionne l'hôte d'ombre (shadow host en anglais) du DOM d'ombre (shadow DOM en anglais) contenant le CSS dans lequel il est utilisé (afin de pouvoir sélectionner un élément personnalisé depuis l'intérieur de son DOM d'ombre), uniquement si le sélecteur fourni comme paramètre de la fonction correspond à un ancêtre de l'hôte d'ombre à l'emplacement qu'il occupe dans la hiérarchie du DOM.

Normalement, les éléments d'un DOM d'ombre sont isolés du DOM extérieur. La fonction :host-context() vous permet de « jeter un œil à l'extérieur » de ce DOM d'ombre et de vérifier si l'un des éléments ancêtres correspond à un sélecteur CSS donné. Par exemple, appliquer une couleur de texte différente aux éléments d'une racine d'ombre (shadow root en anglais) lorsqu'une classe .dark-theme est appliquée à <body>.

Imaginez que vous ayez un élément personnalisé <greenhouse>, dans lequel vit un <chameleon>. Ici, le <greenhouse> est l'hôte du Shadow DOM et l'élément <chameleon> se trouve dans le Shadow DOM. La fonction :host-context() permet au <chameleon> de changer d'apparence en fonction de l'environnement du <greenhouse>. Si le <greenhouse> se trouve dans un endroit ensoleillé (il a une classe « sunny-theme »), le <chameleon> devient jaune. Si le <greenhouse> se trouve dans un endroit ombragé (une classe « shady-theme » est appliquée à la place), le <chameleon> devient bleu.

Ce sélecteur traverse toutes les limites d'ombre. Il recherchera le thème ensoleillé ou ombragé appliqué directement à la <greenhouse> ou à l'un des ancêtres de l'hôte et aux DOM ancêtres jusqu'à atteindre la racine du document.

Pour limiter le sélecteur uniquement à l'hôte <greenhouse> directement ou limiter la sélection au DOM de l'hôte, utilisez plutôt la pseudo-classe :host ou :host().

Note : Cette pseudo-classe n'a aucun effet si elle est utilisée en dehors d'un DOM d'ombre.

La spécificité de :host-context() est celle d'une pseudo-classe, à laquelle s'ajoute la spécificité du sélecteur passé en argument à la fonction.

Exemple interactif

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

:host-context(.container) {
  border: 5px dashed green;
}

:host-context(h1) {
  color: red;
}

<!-- éléments en dehors du DOM d'ombre -->
<div class="container">
  <h1 id="shadow-dom-host"></h1>
</div>

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 DOM d'ombre, uniquement s'il est
   correspondant au sélecteur passé en argument */
:host-context(h1) {
  font-weight: bold;
}

/* Change la couleur du texte des paragraphes de noir à blanc lorsque
   la classe .dark-theme est appliquée à l'élément body */
p {
  color: black;
}

:host-context(body.dark-theme) p {
  color: white;
}

Syntaxe

css

:host-context(<compound-selector>) {
  /* ... */
}

Exemples

Mettre en forme les hôtes d'ombre de façon ciblée

Les fragments de code qui suivent sont tirés de notre exemple sur les sélecteurs d'hôte ^(angl.) (voir la démonstration ^(angl.)).

Dans cet exemple, on a un élément personnalisé, <context-span>, dans lequel on peut écrire du texte :

html

<h1>
  <a href="#"><context-span>Exemple</context-span></a> pour les sélecteurs
  d'hôte
</h1>

Dans le constructeur de l'élément, on crée des éléments <style> et <span>, et on remplit l'élément <span> avec le contenu de l'élément personnalisé, puis on remplit l'élément <style> avec 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: " - pas de lien dans les titres !" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";

Les règles :host-context(h1) { font-style: italic; } et :host-context(h1):after { content: " - pas de lien dans les titres !" } mettent en forme les instances de l'élément <context-span> (ici l'hôte d'ombre) contenus dans des éléments <h1>. Dans notre exemple, nous avons utilisé ces règles pour afficher clairement que cet élément personnalisé ne devrait pas apparaître dans un élément <h1>.

Spécifications

Specification
CSS Shadow Module Level 1 # host-selector

Compatibilité des navigateurs

Voir aussi

Les composants web
La pseudo-classe CSS :host
La fonction de pseudo-classe CSS :host()
La fonction de pseudo-classe CSS :state()
Le pseudo-élément CSS ::slotted
L'élément HTML <template>
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