ShadowRoot: innerHTML property

The innerHTML property of the ShadowRoot interface sets gets or sets the HTML markup to the DOM tree inside the ShadowRoot.

Note that some browsers serialize < and > in attributes as < and > when reading the HTML (see Browser compatibility). This prevents certain exploits where code becomes executable when serialized and then deserialized into HTML.

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

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