在 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 的空格分隔的複合選擇器作為參數，因為文檔頁面中是這樣描述的。
謝謝。
這是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會造成混淆。