Element.shadowRoot

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

值

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

示例

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

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

js
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 样式：

js
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