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 は読み取り専用のプロパティで、その要素がホストになっているシャドウルートを表します。

既に存在している要素にシャドウルートを追加するには Element.attachShadow() を使用してください。

値

ShadowRoot オブジェクトインスタンス、またはシャドウルートが mode に closed を設定されて取り付けられた場合は null です（詳しくは Element.attachShadow() を参照してください）。

例

次のスニペットは life-cycle-callbacks の例から取ったものです (ライブで確認)。その要素の属性で指定された大きさと色の正方形を表示する要素を生成します。

<custom-square> 要素のクラス定義の中に、外部関数である updateStyle() を呼び出すライフサイクルコールバックをいくつか入れて、実際にサイズと色を要素に適用しています。引数として this （カスタム要素そのもの）を渡していることが分かるでしょう。

js
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 を使用してシャドウ DOM への参照を取得します。ここから標準的な DOM 走査技術を使用して、シャドウ 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