--- title: ':host-context()' slug: 'Web/CSS/:host-context()' translation_of: 'Web/CSS/:host-context()' ---
{{CSSRef}}{{SeeCompatTable}}

:host-context() CSS 伪类的作用是选择shadow DOM 中shadow host，这个伪类内可以写关于该shadow host的CSS规则。 (我们可以从 shadow DOM 中选择一个自定义元素 custom element) — 但前提是，在DOM 层级中，括号中的选择器参数必须和shadow host 的祖先相匹配。

典型的使用方法是后代选择器表达式。例如 h1   — 只选择在<h1> 内的自定义元素的实例。

Note: 该伪类的css样式在 shadow DOM 之外的元素上是没有效果的

/* 选择了一个 shadow root host, 当且仅当这个
 shadow root host 是括号中选择器参数(h1)的后代 */

:host-context(h1) {
  font-weight: bold;
}

:host-context(main article) {
  font-weight: bold;
}

Syntax

{{CSSSyntax}}

Examples

下边的代码片段来自 host-selectors (这里查看样式效果)。

在本例中，我们有一个简单的自定义元素 — <context-span> — 你可以把文字包裹在该自定义标签中：

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

在自定义元素的构造器函数中，我们创建 style 和 span 元素。让 span 里呈现的是自定义元素的文字内容，并且给style 元素一些CSS 规则。

let style = document.createElement('style');
let 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: rgba(0,0,0,0.1); padding: 2px 5px; }';

:host-context(h1) { font-style: italic; } 和 :host-context(h1):after { content: " - no links in headers!" 这些CSS 规则规定了位于<h1> 标签内部的 <context-span> 元素的实例的样式。

Specifications

Specification Status Comment
{{ SpecName('CSS Scope', '#host-selector', ':host-context()') }} {{ Spec2('CSS Scope') }} Initial definition.

Browser compatibility

{{Compat("css.selectors.host-context")}}

See also