1 files changed, 113 insertions, 0 deletions
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>