ElementInternals.shadowRoot

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

Syntax

let shadowRoot = ElementInternals.shadowRoot;

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.

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

Browser compatibility