The shadowRoot read-only property of the ElementInternals interface returns the ShadowRoot for this element.
On this page
ElementInternals: shadowRoot property
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 Standard # dom-elementinternals-shadowroot |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
shadowRoot |
88 | 88 | 93 | No | 74 | 16.4 | 88 | 88 | 93 | 63 | 16.4 | 15.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/shadowRoot