ShadowRoot: innerHTML property

TheinnerHTML property of the ShadowRoot interface gets or sets the HTML markup to the DOM tree inside theShadowRoot.

Note that some browsers serialize the< and> characters as< and> when they appear in attribute values (seeBrowser compatibility).This is to prevent a potential security vulnerability (mutation XSS) in which an attacker can craft input that bypasses asanitization function, enabling a cross-site scripting (XSS) attack.

Value

A string.

When set to thenull value, thatnull value is converted to the empty string (""), sosr.innerHTML = null is equivalent tosr.innerHTML = "".

Examples

Setting the innerHTML of a Shadow root

let customElem = document.querySelector("my-shadow-dom-element");let shadow = customElem.shadowRoot;shadow.innerHTML = "<strong>This element should be more important!</strong>";