ElementInternals: shadowRoot プロパティ

shadowRootElementInternals インターフェイスの読み取り専用プロパティで、この要素のシャドウルート (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
# dom-elementinternals-shadowroot

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
shadowRoot

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support