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
No MDN documentation found. You can search for the feature on MDN. If you believe that MDN has no documentation about this feature, you can open an issue on MDN's GitHub repository.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_component_features question
- State of HTML 2024: web_components/web_components_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
Usage (according to Chrome Platform Status)
~0.072% of page loads. More data at chromestatus.
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