initial commit

1 files changed, 165 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/shadow/index.html b/files/zh-cn/web/html/element/shadow/index.html
new file mode 100644
index 0000000000..440d8d23ad
--- /dev/null
+++ b/files/zh-cn/web/html/element/shadow/index.html
@@ -0,0 +1,165 @@
+---
+title: <shadow>
+slug: Web/HTML/Element/Shadow
+translation_of: Web/HTML/Element/shadow
+---
+<p>{{obsolete_header}}</p>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;shadow&gt;</code> 元素 </strong>— <a href="/en-US/docs/Web/Web_Components">Web 组件</a>技术套件的废弃部分 — 目的是用作 Shadow DOM {{glossary("insertion point")}}。如果你在 shadow host 下面创建了多个 shadow root，你就可能已经使用了它。在正常的 HTML 没有任何用处。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">透明内容</a></td>
+  </tr>
+  <tr>
+   <th scope="row">允许的内容</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式内容</a></td>
+  </tr>
+  <tr>
+   <th scope="row">标签省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允许的父元素</th>
+   <td>任何接受流式内容的元素     </td>
+  </tr>
+  <tr>
+   <th scope="row">允许的 ARIA 角色</th>
+   <td>无</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 接口</th>
+   <td>{{domxref("HTMLShadowElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="属性">属性</h2>
+
+<p>这个元素支持 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>这里是一个使用 <code>&lt;shadow&gt;</code> 元素的简单示例。它是个包含所有所需东西的 HTML 文件。</p>
+
+<div class="note">
+<p><strong>注：</strong>这是个实验性的技术。为了使这个代码有效，你使用的浏览器必须支持 Web 组件。请见<a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">在 Firefox 中开启 Web 组件</a>。</p>
+</div>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;&lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;!-- This &lt;div&gt; will hold the shadow roots. --&gt;
+  &lt;div&gt;
+    &lt;!-- This heading will not be displayed --&gt;
+    &lt;h4&gt;My Original Heading&lt;/h4&gt;
+  &lt;/div&gt;
+
+  &lt;script&gt;
+    // Get the &lt;div&gt; above with its content
+    var origContent = document.querySelector('div');
+    // Create the first shadow root
+    var shadowroot1 = origContent.createShadowRoot();
+    // Create the second shadow root
+    var shadowroot2 = origContent.createShadowRoot();
+
+    // Insert something into the older shadow root
+    shadowroot1.innerHTML =
+      '&lt;p&gt;Older shadow root inserted by
+          &amp;lt;shadow&amp;gt;&lt;/p&gt;';
+    // Insert into younger shadow root, including &lt;shadow&gt;.
+    // The previous markup will not be displayed unless
+    // &lt;shadow&gt; is used below.
+    shadowroot2.innerHTML =
+      '&lt;shadow&gt;&lt;/shadow&gt; &lt;p&gt;Younger shadow
+       root, displayed because it is the youngest.&lt;/p&gt;';
+  &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>如果你在 Web 浏览器中展示它，它应该是这样：</p>
+
+<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p>
+
+<h2 id="规范">规范</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', "#the-shadow-element", "shadow")}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>{{CompatGeckoDesktop("28")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 如果 Firefox 上没有开启 Shadow DOM， <code>&lt;shadow&gt;</code> 元素会表现为 {{domxref("HTMLUnknownElement")}}，Shadow DOM 首先在 Firefox 33 中实现，并且在首选项 <code>dom.webcomponents.enabled</code> 背后，它默认是关闭的。</p>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Web 组件</a></li>
+ <li>{{HTMLElement("content")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>