在 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的空格分隔的复合选择器作为参数，因为文档页面中是这样描述的。

谢谢。