initial commit

4 files changed, 339 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/shadowroot/delegatesfocus/index.html b/files/zh-cn/web/api/shadowroot/delegatesfocus/index.html
new file mode 100644
index 0000000000..62073edb52
--- /dev/null
+++ b/files/zh-cn/web/api/shadowroot/delegatesfocus/index.html
@@ -0,0 +1,38 @@
+---
+title: ShadowRoot.delegatesFocus
+slug: Web/API/ShadowRoot/delegatesFocus
+translation_of: Web/API/ShadowRoot/delegatesFocus
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p>{{domxref("ShadowRoot")}} 接口中的只读属性 <strong><code>delegatesFocus</code></strong> 返回一个布尔值表明 delegatesFocus是否在shadow被附加的时候设置了。</p>
+
+<p>这目前是一个实验的非标准特性，仅在Chrome中可用。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <var>df</var> = <var>shadowRoot</var>.delegatesFocus</pre>
+
+<h3 id="值">值</h3>
+
+<p>一个布尔值 — <code>true</code> 值表明shadow root已经delegate focus, <code>false</code> 反之.</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">let customElem = document.querySelector('my-shadow-dom-element');
+let shadow = customElem.shadowRoot;
+
+  ...
+
+// Does it delegate focus?
+let hostElem = shadow.delegatesFocus;</pre>
+
+<h2 id="标准">标准</h2>
+
+<p>这目前是个非标准特性。</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.ShadowRoot.delegatesFocus")}}</p>
diff --git a/files/zh-cn/web/api/shadowroot/index.html b/files/zh-cn/web/api/shadowroot/index.html
new file mode 100644
index 0000000000..42ba338cb3
--- /dev/null
+++ b/files/zh-cn/web/api/shadowroot/index.html
@@ -0,0 +1,113 @@
+---
+title: ShadowRoot
+slug: Web/API/ShadowRoot
+tags:
+  - API
+  - Interface
+  - Reference
+  - ShadowRoot
+  - Web Components
+translation_of: Web/API/ShadowRoot
+---
+<p>{{APIRef('Shadow DOM')}}</p>
+
+<p>Shadow DOM API 的 <code><strong>ShadowRoot</strong></code> 接口是一个 DOM 子树的根节点, 它与文档的主 DOM 树分开渲染。</p>
+
+<p>你可以通过使用一个元素的 {{domxref("Element.shadowRoot")}} 属性来检索它的参考,假设它是由 {{domxref("Element.attachShadow()")}} 创建的并使 <code>mode</code> 设置为 <code>open</code>.</p>
+
+<h2 id="属性">属性</h2>
+
+<dl>
+ <dt>{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>返回一个boolean值表明在 shadow 添加时 delegatesFocus 是否被设置(see {{domxref("Element.attachShadow()")}})</dd>
+ <dt>{{domxref("ShadowRoot.host")}} {{readonlyinline}}</dt>
+ <dd><code>ShadowRoot</code> 附加的宿主 DOM 元素。</dd>
+ <dt>{{domxref("ShadowRoot.innerHTML")}}</dt>
+ <dd><code>ShadowRoot</code> 内部的 DOM 树。</dd>
+ <dt>{{domxref("ShadowRoot.mode")}} {{readonlyinline}}</dt>
+ <dd><code>ShadowRoot</code> 的模式——可以是 <code>open</code> 或者 <code>closed</code>。这定义了 shadow root 的内部实现是否可被 JavaScript 访问及修改 — 也就是说，该实现是否公开，例如，{{HTMLElement("video")}} 标签内部实现无法被 JavaScript 访问及修改。</dd>
+</dl>
+
+<h3 id="从_DocumentOrShadowRoot_中包含的属性">从 DocumentOrShadowRoot 中包含的属性</h3>
+
+<p><em><code>ShadowRoot</code> 接口包含了下列从{{domxref("DocumentOrShadowRoot")}} mixin中定义的属性. 请注意它现在仅在Chrome浏览器中应用; 其它的浏览器仍在{{domxref("Document")}}接口实现.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt>
+ <dd>返回含有获取焦点了的shadow tree的 {{domxref('Element')}} </dd>
+ <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
+ <dd>返回 {{domxref('CSSStyleSheet')}} 的 {{domxref('StyleSheetList')}} 对象，用于代表通过链接加载到文档中或内嵌的样式表。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em> <code>ShadowRoot</code> 接口包含了下列几个在 {{domxref("DocumentOrShadowRoot")}} mixin中定义的方法. 请注意它现在仅在Chrome浏览器中应用; 其它的浏览器仍在{{domxref("Document")}}接口实现.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt>
+ <dd>返回一个 {{domxref('Selection')}} 类来表明用户选择的文本选区或者光标所在的位置</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
+ <dd>返回在指定坐标最上层的元素.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
+ <dd>返回一个包含所有在指定位置上的元素的Array</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
+ <dd>返回一个 {{domxref('CaretPosition')}} 对象，包括包含了光标的DOM节点，以及光标在该节点中的字符偏移量</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的这段代码是从我们的 <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> 示例 (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">查看在线示例</a>)中提取出来的, 它创建了一个由元素的属性指定的大小相等的正方形.</p>
+
+<p>Inside the <code>&lt;custom-square&gt;</code> element's class definition we include some life cycle callbacks that make a call to an external function, <code>upateStyle()</code>, which actually applies the size and color to the element. You'll see that we are passing it <code>this</code> (the custom element itself) as a parameter.</p>
+
+<pre class="brush: js">connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+
+attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}</pre>
+
+<p>In the <code>updateStyle()</code> function itself, we get a reference to the shadow DOM using {{domxref("Element.shadowRoot")}}. From here we use standard DOM traversal techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then update the CSS found inside it:</p>
+
+<pre class="brush: js">function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i &lt; childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent =
+        'div {' +
+          'width: ' + elem.getAttribute('l') + 'px;' +
+          'height: ' + elem.getAttribute('l') + 'px;' +
+          'background-color: ' + elem.getAttribute('c') + ';' +
+        '}';
+    }
+  }
+}</pre>
+
+<h2 id="规范">规范</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('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.ShadowRoot")}}</p>
diff --git a/files/zh-cn/web/api/shadowroot/innerhtml/index.html b/files/zh-cn/web/api/shadowroot/innerhtml/index.html
new file mode 100644
index 0000000000..512965094b
--- /dev/null
+++ b/files/zh-cn/web/api/shadowroot/innerhtml/index.html
@@ -0,0 +1,95 @@
+---
+title: ShadowRoot.innerHTML
+slug: Web/API/ShadowRoot/innerHTML
+tags:
+  - ShadowRoot.innerHTML
+translation_of: Web/API/ShadowRoot/innerHTML
+---
+<p>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</p>
+
+<p> {{domxref("ShadowRoot")}} 接口的 <strong><code>innerHTML </code></strong>属性设置或返回 ShadowRoot内的DOM树。</p>
+
+<h2 id="句法">句法</h2>
+
+<pre class="syntaxbox">let <em>domString</em> = <em>shadowRoot</em>.innerHTML
+// 返回
+
+<em>shadowRoot</em>.innerHTML = <em>domString;</em>
+
+// 设置
+</pre>
+
+<h3 id="值">值</h3>
+
+<p>一个 {{domxref("DOMString")}}.</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="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','#widl-ShadowRoot-innerHTML','ShadowRoot.innerHTML')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Initial definition.</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>53</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>40</td>
+   <td>10</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</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>53</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>40</td>
+   <td>10.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/api/shadowroot/mode/index.html b/files/zh-cn/web/api/shadowroot/mode/index.html
new file mode 100644
index 0000000000..d9cb6032e9
--- /dev/null
+++ b/files/zh-cn/web/api/shadowroot/mode/index.html
@@ -0,0 +1,93 @@
+---
+title: ShadowRoot.mode
+slug: Web/API/ShadowRoot/mode
+translation_of: Web/API/ShadowRoot/mode
+---
+<div>{{APIRef("Shadow DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>mode</code></strong> 是 {{domxref("ShadowRoot")}}  的只读属性，它返回 <code>ShadowRoot</code> 创建时的模式 ("<code>open</code>" 或者 "<code>closed</code>") 。</p>
+
+<p>当 <code>ShadowRoot</code> 的 <code>mode</code> 是 "<code>closed</code>" 时， <code>ShadowRoot</code> 的内部实现无法被 JavaScript 访问及修改 — 也就是说将该实现不公开，例如，<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video" title="HTML &lt;video> 元素 用于在HTML或者XHTML文档中嵌入视频内容。"><code>&lt;video&gt;</code></a> 标签内部实现无法被 JavaScript 访问及修改。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>mode</em> = <em>shadowRoot</em>.mode</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>值为 "<code>open</code>"  或者  "<code>closed</code>".</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>53</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>40</td>
+   <td>10</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</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>53</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>40</td>
+   <td>10.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is not implemented yet. See the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shadowdom/">Edge platform status</a>.</p>
+
+<p>[2] This feature is not implemented yet. See {{bug(1205323)}}.</p>