學習如何在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會造成混淆。