Declarative shadow DOM

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

Baseline Status: Achieved Widely Available on Aug 20, 2026 (Cross-browser Newly Available since Feb 20, 2024).

Desktop Browser Engine Support

Google Chrome

111

Supported

Mozilla Firefox

123

Supported

Apple Safari

16.4

Supported

Microsoft Edge

111

Supported

Mobile Browser Engine Support

Chrome Android

111

Firefox Android

123

Safari iOS

16.4

Specifications and References

Specification ↗ Can I Use (declarative-shadow-dom) ↗ Feature XML ↗

MDN Browser Compat Data Keys:

api.HTMLTemplateElement.shadowRootClonable ↗ api.HTMLTemplateElement.shadowRootDelegatesFocus ↗ api.HTMLTemplateElement.shadowRootMode ↗ api.HTMLTemplateElement.shadowRootSerializable ↗ api.HTMLTemplateElement.shadowRootSlotAssignment ↗ html.elements.template.shadowrootclonable ↗ html.elements.template.shadowrootdelegatesfocus ↗ html.elements.template.shadowrootmode ↗ html.elements.template.shadowrootserializable ↗