当前位置：文江博客知识库简体中文文档 Web API Element shadowRoot

Element.shadowRoot - Web API 接口参考编辑

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

草案
本页尚未完工.

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

标准

标准	状态	备注
Shadow DOM attachShadow()	Obsolete	Initial definition.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!