Element.shadowRoot

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Element.shadowRoot 是只读属性,表示元素挂载的 shadow root。可以使用 Element.attachShadow 给一个已存在的元素添加 shadow root。

语法

var shadowroot = element.shadowRoot;

可以是一个ShadowRoot实例对象,但如果一个 shadow root 的 mode被设置为 closed那么它的值将会是 null。(详情请见 Element.attachShadow ).

示例

下面代码片段取自 life-cycle-callbacks (在线查看), 在这个示例中我们创建了一个在元素属性中指定了大小和颜色的正方形元素。

<custom-square>标签的 class 定义中我们在生命周期的回调函数里调用了一些外部方法——updateStyle(),正是这个函数使得我们添加的正方形元素可以改变大小和颜色。你可以看到我们将this(即我们创建的正方形元素本身)作为一个参数传入了这个方法。

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()函数中我们通过Element.shadowRoot获取到了 Shadow DOM 引用。在这里我们利用了标准的 DOM 遍历技巧来获取在 Shadow DOM 中<style>元素并更新了其中的 CSS 样式:

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

标准

Specification
DOM Standard
# ref-for-dom-element-shadowroot①

浏览器兼容性

BCD tables only load in the browser