ShadowRoot

翻译不完整。 请帮助我们翻译这篇文章!

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 只读
返回 CSSStyleSheetStyleSheetList 对象,用于代表通过链接加载到文档中或内嵌的样式表。

方法

 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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ShadowRoot
Experimental
Chrome Full support 57Edge Full support 79Firefox Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 40Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 41Safari iOS Full support 10.3Samsung Internet Android Full support 6.0
delegatesFocus
Experimental
Chrome Full support 57Edge Full support 79Firefox ? IE No support NoOpera ? Safari No support NoWebView Android Full support 57Chrome Android Full support 57Firefox Android ? Opera Android ? Safari iOS No support NoSamsung Internet Android Full support 7.0
Features included from the DocumentOrShadowRoot mixin
Experimental
Chrome Full support 57Edge Full support 79Firefox Full support 63IE No support NoOpera Full support 40Safari No support No
Notes
No support No
Notes
Notes Features still implemented on the Document interface
WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 63Opera Android Full support 41Safari iOS No support No
Notes
No support No
Notes
Notes Features still implemented on the Document interface
Samsung Internet Android Full support 6.0
host
Experimental
Chrome Full support 57Edge Full support 79Firefox Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 40Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 41Safari iOS Full support 10.3Samsung Internet Android Full support 6.0
innerHTML
ExperimentalNon-standard
Chrome Full support 57Edge Full support 79Firefox Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 40Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 41Safari iOS Full support 10.3Samsung Internet Android Full support 6.0
mode
Experimental
Chrome Full support 57Edge Full support 79Firefox Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 40Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 41Safari iOS Full support 10.3Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.