coderef

Declarative shadow DOMBaseline · Widely available

The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Feb 20, 2024. Widely available since Aug 20, 2026.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–110Not supported
111+Supportedsince Mar 7, 2023
Current: 155
Edge
12–110Not supported
111+Supportedsince Mar 13, 2023
Current: 154
Firefox
1–122Not supported
123+Supportedsince Feb 20, 2024
Current: 157
Safari
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27
MobileChrome Android
18–110Not supported
111+Supportedsince Mar 7, 2023
Current: 155
Firefox Android
4–122Not supported
123+Supportedsince Feb 20, 2024
Current: 157
Safari iOS
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

HTML
<user-card>
  <template shadowrootmode="open">
    <style>:host { display: block; border: 1px solid #ccc; }</style>
    <slot name="name"></slot>
  </template>
  <span slot="name">Ada Lovelace</span>
</user-card>

Feature detection

JS · check before using
if ("HTMLTemplateElement" in globalThis && "shadowRootClonable" in HTMLTemplateElement.prototype) {
  // HTMLTemplateElement.shadowRootClonable is available
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (9). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
HTMLTemplateElement.shadowRootClonable1241241251812412518
HTMLTemplateElement.shadowRootDelegatesFocus1231231231812312318
HTMLTemplateElement.shadowRootMode11111112316.411112316.4
HTMLTemplateElement.shadowRootSerializable1251251281812512818
HTMLTemplateElement.shadowRootSlotAssignment1521521512715215127
template.shadowrootclonable12412412517.512412517.5
template.shadowrootdelegatesfocus12312312316.412312316.4
template.shadowrootmode11111112316.411112316.4
template.shadowrootserializable125125✕18125✕18