ShadowRoot.innerHTML

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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
innerHTML
ExperimentalNon-standard
Chrome Full support 57Edge Full support 79Firefox Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (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 57Chrome Android Full support 57Firefox Android Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (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 41Safari iOS Full support 10.3Samsung 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.
User must explicitly enable this feature.
User must explicitly enable this feature.