ShadowRoot - 表示 DOM 子树的根节点

ShadowRoot 是 Shadow DOM API 的接口，表示 DOM 子树的根节点，该子树与文档的主 DOM 树分开渲染。

您可以使用元素的 Element.shadowRoot 属性来获得元素的阴影根，前提是该元素是使用 Element.attachShadow() 创建且 mode 选项设置为 open。

属性

ShadowRoot.delegatesFocus 只读

返回一个布尔值，该值指示在附加阴影时是否设置了 proxysFocus（请参见 Element.attachShadow()）。

ShadowRoot.host 只读

返回对 ShadowRoot 附加到的 DOM 元素的引用。

ShadowRoot.innerHTML

设置或返回对 ShadowRoot 内的 DOM 树的引用。

ShadowRoot.mode 只读

ShadowRoot 的模式 - open 或 closed。这定义了是否可以从 JavaScript 访问阴影根的内部功能。

DocumentOrShadowRoot 中包含的属性

ShadowRoot 接口包含在 DocumentOrShadowRoot mixin 上定义的以下属性。请注意，这目前仅有 Chrome 实现了；其他浏览器仍在Document 接口上实现它们。

DocumentOrShadowRoot.activeElement 只读

返回阴影树中具有焦点的 Element。

DocumentOrShadowRoot.styleSheets 只读

返回一个 CSSStyleSheet 或 StyleSheetList 对象，用于明确链接到或嵌入到文档中的样式表。

方法

ShadowRoot 接口包含在 DocumentOrShadowRoot mixin 上定义的以下方法。请注意，这目前仅有 Chrome 实现了；其他浏览器仍在Document 接口上实现它们。

DocumentOrShadowRoot.getSelection()

返回一个 Selection 对象，该对象表示用户选择的文本范围或插入符号的当前位置。

DocumentOrShadowRoot.elementFromPoint()

返回指定坐标处的最高元素。

DocumentOrShadowRoot.elementsFromPoint()

返回指定坐标处所有元素的数组。

DocumentOrShadowRoot.caretPositionFromPoint()

返回一个 CaretPosition 对象，该对象包含包含插入符号的 DOM 节点，以及该节点内插入符号的字符偏移量。

实例

以下摘录摘自我们的生命周期回调 实例（另请参见在线实例），它会创建一个元素，该元素显示在属性中指定的大小和颜色的正方形。

在 <custom-square> 元素的类定义中，我们定义了一些生命周期回调，这些回调调用外部函数 updateStyle()，该函数将大小和颜色应用于元素。您会看到我们将 this（自定义元素本身）作为参数传递给它。

connectedCallback() {
  console.log('自定义方形元素已添加到页面。');
  updateStyle(this);
}

attributeChangedCallback(name, oldValue, newValue) {
  console.log('自定义方形元素属性已更改。');
  updateStyle(this);
}

在 updateStyle() 函数本身中，我们使用 Element.shadowRoot 获得对阴影 DOM 的引用。从这里开始，我们使用标准的 DOM 遍历技术在阴影 DOM 中找到 <style> 元素，然后更新其中的 CSS：

function updateStyle(elem) {
  var shadow = elem.shadowRoot;
  var childNodes = shadow.childNodes;
  for(var i = 0; i < 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') + ';' +
        '}';
    }
  }
}

规范

规范	状态	备注
DOM Interface ShadowRoot 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

1. 开发中

2. 功能任然实现在 Document 接口上。

3. 开发中