Element.shadowRoot

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

Element.shadowRoot read-only property represents the shadow root hosted by the element. 使用 Element.attachShadow() to add a shadow root to an existing element.

句法

var shadowroot = element.shadowRoot;

值

A ShadowRoot object instance, or null if the associated shadow root was attached with its mode 设为 closed 。(见 Element.attachShadow() for further details).

范例

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) {
  const shadow = elem.shadowRoot;
  const childNodes = Array.from(shadow.childNodes);
  childNodes.forEach(childNode => {
    if (childNode.nodeName === 'STYLE') {
      childNode.textContent = `
        div {
          width: ${elem.getAttribute('l')}px;
          height: ${elem.getAttribute('l')}px;
          background-color: ${elem.getAttribute('c')};
        }
      `;
    }
  });
}

规范

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

浏览器兼容性

The compatibility table on 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 43	Edge 79	Firefox 63 63 不支持 59 — 63 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 40	Safari 10	WebView Android 43	Chrome Android 43	Firefox Android 63 63 不支持 59 — 63 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 41	Safari iOS Yes	Samsung Internet Android 4.0

图例

完整支持
不支持
用户必须明确启用此特征。

另请参阅

Element.openOrClosedShadowRoot

元数据

最后修改： 2019 年 3 月 23 日

在此页

句法

值

范例

规范

浏览器兼容性

图例

另请参阅

相关话题