ElementInternals: shadowRoot property

The shadowRoot read-only property of the ElementInternals interface returns the ShadowRoot for this element.

Value

A ShadowRoot if the element has a shadow root, otherwise null.

Examples

The following example prints the value of shadowRoot to the console, immediately after calling HTMLElement.attachInternals(). At this point the value is null. After calling Element.attachShadow() the element has a Shadow Root, and shadowRoot returns the object representing it.

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); // a ShadowRoot object
  }
}

Specifications

Specification
HTML
# dom-elementinternals-shadowroot

Browser compatibility

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