学习如何在CSS伪类函数中有效地运用复合选择器:host-context(<选择器>)

Question

在 MDN 文档中，:host-context() 被定义为：

:host-context() CSS 伪类函数选择包含它所在的 CSS 的影子 DOM 的影子主机（因此您可以从其影子 DOM 中选择自定义元素）——但仅当作为函数参数给定的选择器与影子主机的祖先在 DOM 层次结构中的位置匹配时才有效。 换句话说，这允许自定义元素或其影子 DOM 中的任何内容根据其在外部 DOM 中的位置或应用于祖先元素的类/属性应用不同的样式。

问题在于，在提供的实时示例中，:host-context(article, aside) { color: gray; } 语句不起作用。同样，如果我尝试添加其他以空格分隔的复合选择器，例如 :host-context(h1 a){ background: orange}，我遇到了同样的问题。

以下是文档页面中给出的示例：

/* 仅选择影子根主机，前提是它是选择器参数的后代 */
: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;
}

有人知道为什么会出现这种情况，或者如何使空格分隔的选择器（如后代选择器）在 :host-context() 伪类函数的参数中起作用吗？

我期望 :host-context() 伪类函数能够使用类似于 h1 a 的空格分隔的复合选择器作为参数，因为文档页面中是这样描述的。

谢谢。

Answer 1

这是MDN示例中的无效代码。只有<compound-selector>或<simple-selector>才是被接受的类型。

我进行了更改，并且这个pull request已经被批准。

---

描述

从文档中删除了无效的示例。

文档中的语法

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

无效示例

:host-context(article, aside) { color: gray; }

这是无效的，因为提供给:host-context()伪类函数的参数不是<compound-selector>。相反，它是一个“选择器列表”，这是无效的并且在实际示例中不起作用。

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

这是无效的，因为提供给:host-context()伪类函数的参数不是<compound-selector>。相反，它是一个<complex-selector>，这是无效的并且在实际示例中不起作用。

这在选择器的结构 - CSS选择器 - MDN文档页面中有解释。

动机

在查看实际示例时，无效的CSS会引起混淆。