ShadowRoot - Web API 接口参考 编辑

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

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

属性

ShadowRoot.delegatesFocus 只读

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

ShadowRoot.host 只读

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

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

方法

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

DocumentOrShadowRoot.getSelection()

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

DocumentOrShadowRoot.elementFromPoint()

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

DocumentOrShadowRoot.elementsFromPoint()

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

DocumentOrShadowRoot.caretPositionFromPoint()

返回一个 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.

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:

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	Status	Comment
DOM Interface ShadowRoot	Living Standard

浏览器兼容性

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.