元素：shadowRoot 属性

基线广泛可用

此功能已完善，可在多种设备和浏览器版本上使用。它自 2020 年 1 月.

Element.shadowRoot 只读属性表示元素托管的 Shadow DOM。

使用 Element.attachShadow() 为现有元素添加 Shadow DOM。

值

ShadowRoot 对象实例，如果关联的 Shadow DOM 是以其 mode 设置为 closed 附加，则为 null。（有关更多详细信息，请参阅 Element.attachShadow()）。

示例

以下代码片段取自我们的生命周期回调示例（也请查看实际演示），该示例创建一个元素，显示一个正方形，其大小和颜色由元素的属性指定。

在 <custom-square> 元素的类定义中，我们包含了一些生命周期回调，这些回调会调用一个外部函数 updateStyle()，该函数实际应用了元素的大小和颜色。您会发现我们将 this（自定义元素本身）作为参数传递给它。

class Square extends HTMLElement {
  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")};
        }
      `;
    }
  });
}

规范

规范
DOM 标准 # ref-for-dom-element-shadowroot①

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。