Dans la documentation MDN, :host-context() est défini comme :

: la fonction de pseudo-classe CSS host-context() sélectionne l'hôte fantôme qui contient le DOM fantôme du CSS dans lequel il se trouve (vous pouvez donc sélectionner des éléments personnalisés à partir de son DOM fantôme) - mais seulement si le sélecteur est donné en fonction argument Valable uniquement s'il correspond à la position de l'ancêtre de l'hôte fantôme dans la hiérarchie DOM. En d'autres termes, cela permet à un élément personnalisé ou à tout élément de son DOM fantôme d'avoir différents styles appliqués en fonction de sa position dans le DOM externe ou des classes/propriétés appliquées aux éléments ancêtres.

Le problème est que dans l'exemple live fourni, :host-context(article, aside) { color: gray; } 语句不起作用。同样，如果我尝试添加其他以空格分隔的复合选择器，例如 :host-context(h1 a){ background: orange}, j'ai rencontré le même problème.

Voici l'exemple donné dans la page de documentation :

/* 仅选择影子根主机，前提是它是选择器参数的后代 */
:host-context(h1) {
  font-weight: bold;
}

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

/* 当在文档主体上应用 .dark-theme 类时，将段落文本颜色从黑色更改为白色 */
p {
  color: #000;
}

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

Est-ce que quelqu'un sait pourquoi cela se produit, ou comment faire fonctionner les sélecteurs délimités par des espaces (comme les sélecteurs descendants) dans les arguments des :host-context() fonctions de pseudo-classe ?

Je m'attendais :host-context() 伪类函数能够使用类似于 h1 a à ce que la fonction pseudo-classe soit capable de prendre un sélecteur composé séparé par des espaces similaire à h1 a comme argument, car c'est ainsi qu'il est décrit dans la page de documentation.

Merci.