ShadowRoot

ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree.

You can retrieve a reference to an element's shadow root using its Element.shadowRoot property, provided it was created using Element.attachShadow() with the mode option set to open .

特性

ShadowRoot.delegatesFocus 只读
Returns a boolean that indicates whether delegatesFocus was set when the shadow was attached (see Element.attachShadow() ).
ShadowRoot.host 只读
Returns a reference to the DOM element the ShadowRoot is attached to.
ShadowRoot.innerHTML
Sets or returns a reference to the DOM tree inside the ShadowRoot .
ShadowRoot.mode 只读
The mode of the ShadowRoot — either open or closed . This defines whether or not the shadow root's internal features are accessible from JavaScript.

Properties included from DocumentOrShadowRoot

ShadowRoot interface includes the following properties defined on the DocumentOrShadowRoot mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the Document 接口。

DocumentOrShadowRoot.activeElement 只读
返回 Element within the shadow tree that has focus.
DocumentOrShadowRoot.styleSheets 只读
返回 StyleSheetList of CSSStyleSheet objects for stylesheets explicitly linked into, or embedded in a document.

方法

ShadowRoot interface includes the following methods defined on the DocumentOrShadowRoot mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the Document 接口。

DocumentOrShadowRoot.getSelection()
返回 Selection object representing the range of text selected by the user, or the current position of the caret.
DocumentOrShadowRoot.elementFromPoint()
Returns the topmost element at the specified coordinates.
DocumentOrShadowRoot.elementsFromPoint()
Returns an array of all elements at the specified coordinates.
DocumentOrShadowRoot.caretPositionFromPoint()
返回 CaretPosition object containing the DOM node containing the caret, and caret's character offset within that node.

范例

The following snippets are taken from our life-cycle-callbacks example ( see it live also ), which creates an element that displays a square of a size and color specified in the element's attributes.

Inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle() , 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') + ';' +
        '}';
    }
  }
}
					

规范

规范 状态 Comment
DOM
The definition of 'Interface ShadowRoot' in that specification.
实时标准

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
ShadowRoot
Chrome 57 Edge 79 Firefox 63
63
不支持 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 Opera 40 Safari 10.1 WebView Android 57 Chrome Android 57 Firefox Android 63
63
不支持 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 41 Safari iOS 10.3 Samsung Internet Android 6.0
delegatesFocus
Chrome 57 Edge 79 Firefox ? IE No Opera ? Safari No WebView Android 57 Chrome Android 57 Firefox Android ? Opera Android ? Safari iOS No Samsung Internet Android 7.0
Features included from the DocumentOrShadowRoot mixin
Chrome 57 Edge 79 Firefox 63 IE No Opera 40 Safari No
不支持 No
Features still implemented on the Document interface
WebView Android 57 Chrome Android 57 Firefox Android 63 Opera Android 41 Safari iOS No
不支持 No
Features still implemented on the Document interface
Samsung Internet Android 6.0
host
Chrome 57 Edge 79 Firefox 63
63
不支持 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 Opera 40 Safari 10.1 WebView Android 57 Chrome Android 57 Firefox Android 63
63
不支持 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 41 Safari iOS 10.3 Samsung Internet Android 6.0
innerHTML
非标
Chrome 57 Edge 79 Firefox 63
63
不支持 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 Opera 40 Safari 10.1 WebView Android 57 Chrome Android 57 Firefox Android 63
63
不支持 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 41 Safari iOS 10.3 Samsung Internet Android 6.0
mode
Chrome 57 Edge 79 Firefox 63
63
不支持 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 Opera 40 Safari 10.1 WebView Android 57 Chrome Android 57 Firefox Android 63
63
不支持 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 41 Safari iOS 10.3 Samsung Internet Android 6.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
非标。预期跨浏览器支持较差。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。