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.
Status
Baseline Newly Available (since 2024-02-20)
This feature is expected to reach Baseline Widely Available status on: 2026-08-20
MDN documentation
Specifications
- HTML (#attr-template-shadowrootmode), from HTML Workstream (WHATWG).
Browser support (view on caniuse.com)
- Chrome 111 Released on 2023-03-07
- Chrome Android 111 Released on 2023-03-07
- Edge 111 Released on 2023-03-13
- Firefox 123 Released on 2024-02-20
- Firefox for Android 123 Released on 2024-02-20
- Safari 16.4 Released on 2023-03-27
- Safari on iOS 16.4 Released on 2023-03-27
Surveys
- State of HTML 2025 > web components > web components other pain points limitations 1
- State of HTML 2025 > web components > web components other pain points features
- State of HTML 2025 > web components > web components other pain points
- State of HTML 2025 > web components > web components features
- State of HTML 2025 > features > all features
- State of HTML 2025 > content > content pain points limitations 1
- State of HTML 2025 > content > content pain points features
- State of HTML 2025 > content > content pain points
- State of HTML 2024 > web components > web components features
- State of HTML 2024 > web components > web component features
- State of HTML 2024 > usage > html interoperability features
- State of HTML 2024 > features > all features
- State of HTML 2023 > web components > web components main features
- State of HTML 2023 > usage > html interoperability features
- State of HTML 2023 > features > all features
- State of CSS 2025 > usage > css missing features
Usage (according to Chrome Platform Status)
~0.218% of page loads. More data at chromestatus.com.Interop
- Included in Interop 2024
Web Platform Tests (WPT)
View the latest WPT test results for this featureView as JSON | Edit this feature | Report an issue | Web-features entry: source, dist