Declarative shadow DOM
Newly available since 2024-02-20
The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.
Learning resources on MDN
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 2024: web_components/web_components_features question
- State of HTML 2024: web_components/web_component_features question
- State of HTML 2024: features/all_features question
- State of HTML 2023: web_components/web_components_main_features question
- State of HTML 2023: usage/html_interoperability_features question
- State of HTML 2023: features/all_features question
Specifications
- HTML (#attr-template-shadowrootmode), from HTML Workstream (WHATWG).
View web-platform-tests results for this feature - View the feature source file (dist) - Edit the feature - Report an issue about this feature