MDN wants to learn about developers like you:


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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 53 ? ? ? 40 10
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 53 ? ? ? 40 10.1

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, DomenicDenicola, sideshowbarker, jpmedley
 Last updated by: chrisdavidmills,