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

Autrement dit, cela permet à un élément personnalisé, ou à n'importe quoi au sein du DOM sombre de cet élément personnalisé, d'appliquer différents styles selon sa position au sein du DOM extérieur ou des classes ou attributs appliqués aux éléments ancêtres.

Une utilisation classique consiste à utiliser une expression avec un sélecteur de descendants, par exemple h1, afin de cibler uniquement les instances de l'élément personnalisé situées dans un élément

. Un autre usage pourrait consister à permettre aux éléments internes de réagir aux classes ou attributs des éléments parmi les ancêtres (par exemple, appliquer une couleur de texte différente lorsqu'une classe .dark-theme est appliquée à ).

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

css

/* Cible l'hôte d'une racine sombre, uniquement si elle
   descend du sélecteur passé en argument */
:host-context(h1) {
  font-weight: bold;
}

:host-context(main article) {
  font-weight: bold;
}

/* Change la couleur de texte d'un paragraphe de noir à
   blanc lorsqu'une classe .dark-theme est appliquée au
   corps du document. */
p {
  color: #000;
}

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