: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 # 宿主选择器 |
浏览器兼容性
加载中…