:host-context()
已棄用：此特性不再推薦。雖然某些瀏覽器可能仍然支援它，但它可能已經從相關的網路標準中刪除，可能正在刪除過程中，或者可能僅為相容性目的而保留。請避免使用它，如果可能，請更新現有程式碼；請參閱本頁底部的相容性表格以指導您的決策。請注意，此特性可能隨時停止工作。
:host-context() CSS 偽類允許你根據 Shadow Host（具有 Shadow Root 的元素）及其 DOM 祖先的選擇器，以不同的方式為 Shadow DOM 內的元素設定樣式。
通常，Shadow DOM 中的元素與其外部的 DOM 是隔離的。:host-context() 允許你“窺視”這個 Shadow DOM 之外，檢查元素的任何祖先元素是否匹配某個 CSS 選擇器。例如，當 .dark-theme 類應用於 <body> 時，為 Shadow Root 中的元素應用不同的文字顏色。
可以這樣理解：想象你有一個自定義元素 <greenhouse>，裡面住著一個 <chameleon>。這裡，<greenhouse> 是 Shadow DOM 的宿主，而 <chameleon> 元素位於 Shadow DOM 內部。:host-context() 允許 <chameleon> 根據 <greenhouse> 的環境改變它的外觀。如果 <greenhouse> 處於陽光充足的位置（具有“sunny-theme”類），<chameleon> 就會變成黃色。如果 <greenhouse> 處於陰涼處（應用了“shady-theme”類），<chameleon> 就會變成藍色。
這個選擇器會穿透所有 Shadow 邊界。它會在直接應用於 <greenhouse> 或宿主的任何祖先以及祖先 DOM 上查詢陽光或陰影主題，一直到文件根節點。
若要將選擇器僅限於 <greenhouse> 宿主本身，或將選擇範圍限制為宿主的 DOM，請改用 :host 或 :host() 偽類。
注意：在 Shadow DOM 外部使用時，這沒有效果。
試一試
/* Following CSS is being applied inside the shadow DOM. */
:host-context(.container) {
border: 5px dashed green;
}
:host-context(h1) {
color: red;
}
<!-- elements outside shadow dom -->
<div class="container">
<h1 id="shadow-dom-host"></h1>
</div>
const shadowDom = init();
// add a <span> element in the shadow DOM
const span = document.createElement("span");
span.textContent = "Inside shadow DOM";
shadowDom.appendChild(span);
// attach shadow DOM to the #shadow-dom-host element
function init() {
const host = document.getElementById("shadow-dom-host");
const shadowDom = host.attachShadow({ mode: "open" });
const cssTab = document.querySelector("#css-output");
const shadowStyle = document.createElement("style");
shadowStyle.textContent = cssTab.textContent;
shadowDom.appendChild(shadowStyle);
cssTab.addEventListener("change", () => {
shadowStyle.textContent = cssTab.textContent;
});
return shadowDom;
}
/* Selects a shadow root host, only if it is
a descendant of the selector argument given */
:host-context(h1) {
font-weight: bold;
}
/* Changes paragraph text color from black to white when
a .dark-theme class is applied to the document body */
p {
color: black;
}
:host-context(body.dark-theme) p {
color: white;
}
語法
:host-context(<compound-selector>) {
/* ... */
}
示例
選擇性地為 Shadow Host 設定樣式
以下程式碼片段取自我們的 host-selectors 示例（也可線上檢視）。
在這個示例中，我們有一個基本的自定義元素 — <context-span> — 你可以用它來包裹文字
<h1>
Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
在元素的建構函式中，我們建立 style 和 span 元素，用自定義元素的內容填充 span，並用一些 CSS 規則填充 style 元素
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);
style.textContent =
"span:hover { text-decoration: underline; }" +
":host-context(h1) { font-style: italic; }" +
':host-context(h1)::after { content: " - no links in headers!" }' +
":host(.footer) { color : red; }" +
":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
:host-context(h1) { font-style: italic; } 和 :host-context(h1)::after { content: " - no links in headers!" } 規則為 <h1> 內部的 <context-span> 元素例項（本例中的 Shadow Host）設定樣式。我們用它來明確表示在我們的設計中，自定義元素不應該出現在 <h1> 內部。
規範
| 規範 |
|---|
| CSS 作用域模組級別 1 # 宿主選擇器 |
瀏覽器相容性
載入中…