initial commit

1 files changed, 92 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/_colon_host-context()/index.html b/files/zh-cn/web/css/_colon_host-context()/index.html
new file mode 100644
index 0000000000..69168913ff
--- /dev/null
+++ b/files/zh-cn/web/css/_colon_host-context()/index.html
@@ -0,0 +1,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>