在:host-context() - MDN DOcs条中，有这样的规定:
:host-context()css伪类函数 Select 影子DOM的影子主机，其中包含使用它的CSS(这样您就可以从其影子DOM内部 Select 一个定制元素)--但前提是作为函数参数给出的 Select 器与影子主机的祖先(S)在DOM层次 struct 中的位置匹配. 换句话说，这允许自定义元素或该自定义元素的影子DOM中的任何内容根据其在外部DOM中的位置或应用于祖先元素的类/属性来应用不同的样式.
然而，问题是，在live example个条件下，:host-context(article, aside) { color: gray; }语句并不适用.类似地，如果我try 添加其他以空格分隔的复合 Select 器(如:host-context(h1 a){ background: orange})，我会得到相同的问题，即它没有被apply.
以下是文档页面中给出的示例
/* Selects a shadow root host, only if it is
a descendant of the selector argument given */
:host-context(h1) {
font-weight: bold;
}
:host-context(main article) {
font-weight: bold;
}
/* Changes paragraph text color from black to white when
a .dark-theme class is applied to the document body */
p {
color: #000;
}
:host-context(body.dark-theme) p {
color: #fff;
}
有谁知道为什么会发生这种情况，或者我如何让空格分隔的 Select 器(如后代 Select 器)在:host-context()伪类函数中作为参数工作？
我希望:host-context()伪类函数使用一个参数，该参数是一个空格分隔的复合 Select 符，如h1 a，因为这是文档页面中所描述的.
谢谢.