ShadowRoot

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()
返回一个 Selection 类来表明用户选择的文本选区或者光标所在的位置
DocumentOrShadowRoot.elementFromPoint()
返回在指定坐标最上层的元素.
DocumentOrShadowRoot.elementsFromPoint()
返回一个包含所有在指定位置上的元素的Array
DocumentOrShadowRoot.caretPositionFromPoint() (en-US)
返回一个 CaretPosition (en-US) 对象,包括包含了光标的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