:host()

:host() CSS 伪类 函数选择包含其所用 CSS 的Shadow DOM 的 Shadow 宿主（因此您可以从其 Shadow DOM 内部选择自定义元素）——但仅当作为函数参数给出的选择器与 Shadow 宿主匹配时。:host() 在 Shadow DOM 外部使用时无效。

最明显的用途是仅在某些自定义元素实例上放置一个类名，然后将相关的类选择器作为函数参数包含在内。您不能将此与后代选择器表达式一起使用，以仅选择位于特定祖先内部的自定义元素实例。那是:host-context() 的工作。

注意：虽然其他函数式伪类，如:is() 和:not() 接受一个选择器列表作为其参数，但:host() 将单个复合选择器作为其参数。此外，虽然:is() 和:not() 只考虑其参数的特异性，但:host() 的特异性既是伪类的特异性，也是其参数的特异性。

试一试

css
/* Selects a shadow root host, only if it is
   matched by the selector argument */
:host(.special-custom-element) {
  font-weight: bold;
}

语法

css
:host(<compound-selector>) {
  /* ... */
}

示例

选择性地设置 Shadow 宿主样式

以下代码段取自我们的host-selectors 示例（也可以在线查看）。

在这个例子中，我们有一个简单的自定义元素——<context-span>——你可以用它来包装文本

html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>

在元素的构造函数内部，我们创建了style 和span 元素，用自定义元素的内容填充span，并用一些 CSS 规则填充style 元素

js
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-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";

:host(.footer) { color : red; } 规则设置文档中所有具有footer 类设置的<context-span> 元素（此实例中的 Shadow 宿主）的样式——我们已使用它为<footer>内部的元素实例赋予了特殊的颜色。

规范

规范
CSS 作用域模块级别 1
# host-selector

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅