files/zh-cn/web/css/_colon_host-context()/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

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

<div>
<p><strong><code>:host-context()</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">CSS 伪类</a>的作用是选择shadow DOM 中shadow host，这个伪类内可以写关于该shadow host的CSS规则。 (我们可以从 shadow DOM 中选择一个自定义元素 custom element) — 但前提是，在DOM 层级中，括号中的选择器参数必须和shadow host 的祖先相匹配。</p>
</div>

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

<div class="note">
<p><strong>Note</strong>: 该伪类的css样式在 shadow DOM 之外的元素上是没有效果的</p>
</div>

<pre class="brush: css no-line-numbers">/* 选择了一个 shadow root host, 当且仅当这个
 shadow root host 是括号中选择器参数(h1)的后代 */

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

:host-context(main article) {
  font-weight: bold;
}
</pre>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">{{CSSSyntax}}</pre>

<h2 id="Examples">Examples</h2>

<p>下边的代码片段来自 <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors">host-selectors</a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">这里查看样式效果</a>)。</p>

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

<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>

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

<pre class="brush: js">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; }';</pre>

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

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS Scope', '#host-selector', ':host-context()') }}</td>
   <td>{{ Spec2('CSS Scope') }}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat("css.selectors.host-context")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/Web_Components">Web components</a></li>
 <li>{{cssxref(":host")}}</li>
 <li>{{cssxref(":host()")}}</li>
</ul>