The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree.
Properties
ShadowRoot.modeRead only- The mode of the
ShadowRoot: either"open"or "closed". - Setting the
modeof a shadow root to "closed" makes the shadow root’s implementation internals inaccessible and unchangeable from JavaScript—in the same way the implementation internals of, for example, the<video>element are inaccessible and unchangeable from JavaScript. ShadowRoot.hostRead only- A DOM element to which the
ShadowRootis attached. ShadowRoot.innerHTML- The DOM tree inside the
ShadowRoot.
Specifications
| Specification | Status | Comment |
|---|---|---|
| DOM The definition of 'Interface ShadowRoot' in that specification. |
Living Standard | |
| Shadow DOM The definition of 'the ShadowRoot interface' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 53 | No support[1] | No support[2] | No support | 40 | 10 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 53 | No support[1] | No support[2] | No support | 40 | 10.1 |
[1] This feature is not implemented yet. See the Edge platform status.
[2] This feature is implemented behind the preference dom.webcomponents.enabled, defaulting to false. See bug 1205323.