HTML shadowrootmode Attribute

HTML shadowrootmode Attribute

The HTML shadowrootmode attribute is an enumerated attribute used with the <template> element to create a declarative shadow root on the template's parent element. Its value determines whether the shadow root uses open or closed mode.

Elements That Use the shadowrootmode Attribute

The shadowrootmode attribute is used with the <template> element to declare a shadow root.

Supported Values

The shadowrootmode attribute accepts two values:

How shadowrootmode Works

When the HTML parser encounters a <template> with shadowrootmode="open" or shadowrootmode="closed", it creates a shadow root on the template's parent element. The template's contents become the contents of that shadow root.

<div>
  <template shadowrootmode="open">
    <p>This content is inside the shadow root.</p>
  </template>
</div>

In a supporting browser, the <template> itself is not retained as a normal template element in the resulting DOM. Instead, its contents are placed inside the shadow root attached to the parent element.

Open Shadow Roots

The open value creates an open shadow root. JavaScript outside the shadow tree can access the shadow root through the host element's shadowRoot property.

<div id="component">
  <template shadowrootmode="open">
    <p>Open shadow root content</p>
  </template>
</div>

For an open shadow root, JavaScript can use document.querySelector("#component").shadowRoot to obtain the shadow root.

Closed Shadow Roots

The closed value creates a closed shadow root. The shadow root is not exposed through the host element's shadowRoot property.

<div id="component">
  <template shadowrootmode="closed">
    <p>Closed shadow root content</p>
  </template>
</div>

For a closed shadow root, the host element's shadowRoot property returns null. The content can still be rendered, but outside JavaScript cannot obtain the shadow root through that property.

Missing or Invalid Values

The missing value default and invalid value default for shadowrootmode are both the None state. This means that a <template> without the attribute, or with a value other than open or closed, does not declare a shadow root.

<template>
  <p>Regular template content</p>
</template>

Without a valid shadowrootmode value, the browser creates a normal HTMLTemplateElement rather than using the template to create a declarative shadow root.

Common Mistakes

Do not use values other than open or closed. An invalid value does not create a declarative shadow root.

Do not treat shadowrootmode as a boolean attribute. It requires either the open or closed value.

Do not assume that closed prevents the shadow content from being displayed. It controls access to the shadow root through the host element's shadowRoot property, not whether the shadow tree is rendered.

Do not use the older non-standard shadowroot attribute. The standard attribute for declarative shadow DOM is shadowrootmode.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The shadowrootmode attribute on the <template> element is widely supported in current core browsers. Older browser versions may not support declarative shadow DOM.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the shadowrootmode Attribute

The example uses shadowrootmode="open" to create an open declarative shadow root. The paragraph and its styling are contained within the shadow tree.

Summary

The HTML shadowrootmode attribute is an enumerated attribute used on the <template> element to create a declarative shadow root on its parent. The open value allows the shadow root to be accessed through the host element's shadowRoot property, while closed prevents access through that property. If the attribute is missing or has an invalid value, the template does not create a declarative shadow root.