ShadowRoot | Web API

在此页

特性
方法
范例
规范
浏览器兼容性
相关话题

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() 采用 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.

包括特性来自 DocumentOrShadowRoot

ShadowRoot 接口包括的以下特性定义在 DocumentOrShadowRoot mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the Document 接口。

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

方法

ShadowRoot 接口包括的以下方法定义在 DocumentOrShadowRoot mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the Document 接口。

DocumentOrShadowRoot.getSelection(): 返回 Selection 对象，表示用户选择的文本范围或 ^ 插入符号的当前位置。
DocumentOrShadowRoot.elementFromPoint()
DocumentOrShadowRoot.elementsFromPoint()
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);
}

在 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') + ';' +
        '}';
    }
  }
}

规范

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

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	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 ). To change preferences in Firefox, visit	IE No	Opera 40	Safari 10.1	WebView Android 57	Chrome Android 57	Firefox Android 63 63 不支持 59 — 63 Disabled Disabled ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	IE No	Opera 40	Safari 10.1	WebView Android 57	Chrome Android 57	Firefox Android 63 63 不支持 59 — 63 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 41	Safari iOS 10.3	Samsung Internet Android 6.0
`innerHTML` 非标	Chrome 57	Edge 79	Firefox 63 63 不支持 59 — 63 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 40	Safari 10.1	WebView Android 57	Chrome Android 57	Firefox Android 63 63 不支持 59 — 63 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 41	Safari iOS 10.3	Samsung Internet Android 6.0
`mode`	Chrome 57	Edge 79	Firefox 63 63 不支持 59 — 63 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 40	Safari 10.1	WebView Android 57	Chrome Android 57	Firefox Android 63 63 不支持 59 — 63 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 41	Safari iOS 10.3	Samsung Internet Android 6.0

图例

完整支持
不支持
兼容性未知 ?
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。

用户必须明确启用此特征。

元数据

最后修改： Apr 23, 2019

在此页

特性

包括特性来自 DocumentOrShadowRoot

方法

范例

规范

浏览器兼容性

图例

相关话题