ShadowRoot

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Shadow DOM API 的 ShadowRoot 接口是一个 DOM 子树的根节点,它与文档的主 DOM 树分开渲染。

你可以通过使用一个元素的 Element.shadowRoot 属性来检索它的参考,假设它是由 Element.attachShadow() 创建的并使 mode 设置为 open.

属性

ShadowRoot.delegatesFocus 只读 非标准

返回一个 boolean 值表明在 shadow 添加时 delegatesFocus 是否被设置 (see Element.attachShadow())

ShadowRoot.host (en-US) 只读

ShadowRoot 附加的宿主 DOM 元素。

ShadowRoot.innerHTML

ShadowRoot 内部的 DOM 树。

ShadowRoot.mode 只读

ShadowRoot 的模式——可以是 open 或者 closed。这定义了 shadow root 的内部实现是否可被 JavaScript 访问及修改 — 也就是说,该实现是否公开,例如,<video> 标签内部实现无法被 JavaScript 访问及修改。

从 DocumentOrShadowRoot 中包含的属性

ShadowRoot 接口包含了下列从DocumentOrShadowRoot mixin 中定义的属性。请注意它现在仅在 Chrome 浏览器中应用; 其他的浏览器仍在Document接口实现。

DocumentOrShadowRoot.activeElement 只读

返回含有获取焦点了的 shadow tree 的 Element

DocumentOrShadowRoot.styleSheets 只读

返回 CSSStyleSheetStyleSheetList 对象,用于代表通过链接加载到文档中或内嵌的样式表。

方法

ShadowRoot 接口包含了下列几个在 DocumentOrShadowRoot mixin 中定义的方法。请注意它现在仅在 Chrome 浏览器中应用; 其他的浏览器仍在Document接口实现。

DocumentOrShadowRoot.getSelection() (en-US)

返回一个 Selection 类来表明用户选择的文本选区或者光标所在的位置

DocumentOrShadowRoot.elementFromPoint()

返回在指定坐标最上层的元素。

DocumentOrShadowRoot.elementsFromPoint()

返回一个包含所有在指定位置上的元素的 Array

DocumentOrShadowRoot.caretPositionFromPoint() (en-US)

返回一个 CaretPosition 对象,包括包含了光标的 DOM 节点,以及光标在该节点中的字符偏移量

例子

下面的这段代码是从我们的 life-cycle-callbacks 示例 (查看在线示例) 中提取出来的,它创建了一个由元素的属性指定的大小相等的正方形。

Inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, upateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.

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);
}

In the updateStyle() function itself, we get a reference to the shadow DOM using Element.shadowRoot. From here we use standard DOM traversal techniques to find the <style> element inside the shadow DOM and then update the CSS found inside it:

js
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") +
        ";" +
        "}";
    }
  }
}

规范

Specification
DOM Standard
# interface-shadowroot

浏览器兼容性

BCD tables only load in the browser