ElementInternals: shadowRoot プロパティ

shadowRoot は ElementInternals インターフェイスの読み取り専用プロパティで、この要素のシャドウルート (ShadowRoot) を返します。

値

この要素にシャドウルートがある場合は ShadowRoot、それ以外の場合は null です。

例

次の例では、HTMLElement.attachInternals() を呼び出した直後に、shadowRoot の値をコンソールに出力しています。この時点では値は null です。Element.attachShadow() を呼び出した後、要素にはシャドウルートがあり、shadowRoot はそれを表すオブジェクトを返します。

js
class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.internals_ = this.attachInternals();

    console.log(this.internals_.shadowRoot); // null

    this.attachShadow({ mode: "open" });

    console.log(this.internals_.shadowRoot); // ShadowRoot オブジェクト
  }
}

仕様書

Specification
HTML Standard
# dom-elementinternals-shadowroot

ブラウザーの互換性

BCD tables only load in the browser