This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The innerHTML property of the ShadowRoot interface sets or returns a reference to the DOM tree inside the ShadowRoot.


var domString = shadowRoot.innerHTML
shadowRoot.innerHTML = domString


A DOMString.


let customElem = document.querySelector('my-shadow-dom-element');
let shadow = customElem.shadowRoot;

shadow.innerHTML = '<strong>This element should be more important!</strong>';


This property is not defined by any specifications yet; see this open spec issue to specify it.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support53 No1592 3 No4010.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5353 No1592 34010.16.0

1. Under consideration

2. See bug 1205323

3. From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Document Tags and Contributors

Last updated by: ExE-Boss,