---
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>