ShadowRoot.innerHTML

Non-standard
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.

Syntax

var domString = shadowRoot.innerHTML
shadowRoot.innerHTML = domString

Value

A DOMString.

Examples

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

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

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
ExperimentalNon-standard
Chrome Full support 53Edge No support No
Notes
No support No
Notes
Notes In Development
Firefox Full support 63
Full support 63
No support 59 — 65
Notes Disabled
Notes See bug 1205323
Disabled From version 59 until version 65 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 40Safari Full support 10.1WebView Android Full support 53Chrome Android Full support 53Edge Mobile No support No
Notes
No support No
Notes
Notes In Development
Firefox Android Full support 63
Full support 63
No support 59 — 65
Notes Disabled
Notes See bug 1205323
Disabled From version 59 until version 65 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 40Safari iOS Full support 10.1Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Document Tags and Contributors

Last updated by: ExE-Boss,