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

Value

Getting the property returns a string containing the HTML serialization of the shadow root's descendants.

Setting the property accepts either aTrustedHTML object or a string.It parses this value as HTML and replaces all the element's descendants with the result.When set to thenull value, thatnull value is converted to the empty string (""), soshadowRoot.innerHTML = null is equivalent toshadowRoot.innerHTML = "".

Exceptions

SyntaxErrorDOMException

Thrown if an attempt was made to set the value ofinnerHTML using a string which is not properly-formed HTML.

TypeError

Thrown if the property is set to a string whenTrusted Types areenforced by a CSP and no default policy is defined.

Description

innerHTML gets a serialization of the nested child DOM elements within the shadow root, or sets HTML or XML that should be parsed to replace the DOM tree within the shadow root.

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.

Security considerations

TheinnerHTML property is a possible vector forcross-site scripting (XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.While the property does prevent<script> elements from executing when they are injected, it is susceptible to many other ways that attackers can craft HTML to run malicious JavaScript.For example, the following example would execute the code in theerror event handler, because the<img>src value is not a valid image URL:

const name = "<img src='x' onerror='alert(1)'>";shadowRoot.innerHTML = name; // shows the alert

You can mitigate these issues by always assigningTrustedHTML objects instead of strings, andenforcing trusted types using therequire-trusted-types-for CSP directive.This ensures that the input is passed through a transformation function, which has the chance tosanitize the input to remove potentially dangerous markup before it is injected.

Examples

Reading the HTML contents of an element

ReadinginnerHTML causes the user agent to serialize the shadow root's descendants.

Given the following HTML:

<div>  <template shadowrootmode="open">    <p>My name is Joe</p>  </template></div>

You can get and log the markup for the shadow root as shown:

const shadowHost = document.querySelector("#host");const shadowRoot = shadowHost.shadowRoot;const contents = shadowRoot.innerHTML;console.log(contents); // "\n  <p>My name is Joe</p>\n"

Setting the innerHTML of a Shadow root

In this example we'll replace an element's DOM by assigning HTML to the element'sinnerHTML property.To mitigate the risk of XSS, we'll first create aTrustedHTML object from the string containing the HTML, and then assign that object toinnerHTML.

Trusted types are not yet supported on all browsers, so first we define thetrusted types tinyfill.This acts as a transparent replacement for the Trusted Types JavaScript API:

if (typeof trustedTypes === "undefined")  trustedTypes = { createPolicy: (n, rules) => rules };

Next we create aTrustedTypePolicy that defines acreateHTML() method for transforming an input string intoTrustedHTML instances.Commonly, implementations ofcreateHTML() use a library such asDOMPurify to sanitize the input as shown below:

const policy = trustedTypes.createPolicy("my-policy", {  createHTML: (input) => DOMPurify.sanitize(input),});

Then we use thispolicy object to create aTrustedHTML object from the potentially unsafe input string, and assign the result to the element:

// The potentially malicious stringconst untrustedString = "<p>I might be XSS</p><img src='x' onerror='alert(1)'>";// Create a TrustedHTML instance using the policyconst trustedHTML = policy.createHTML(untrustedString);// Get the shadow rootconst shadowHost = document.querySelector("#host");const shadowRoot = shadowHost.shadowRoot;// Inject the TrustedHTML (which contains a trusted string)shadowRoot.innerHTML = trustedHTML;

Specifications

Browser compatibility