Shadow DOM
Widely available since 2022-07-15
Shadow DOM allows you to attach encapsulated "shadow" DOM trees to elements. A shadow DOM tree is a separate component, isolated from the scripts and styles in other parts of the document. This is a part of Web Components.
Learning resources on MDN
Browser support (view on caniuse.com)
- Chrome 53 Released on 2016-08-31
- Chrome Android 53 Released on 2016-09-07
- Edge 79 Released on 2020-01-15
- Firefox 63 Released on 2018-10-23
- Firefox for Android 63 Released on 2018-10-23
- Safari 10 Released on 2016-09-20
- Safari on iOS 10 Released on 2016-09-13
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: web_components/using_web_components_pain_points question
- State of HTML 2023: web_components/making_web_components_pain_points question
- State of HTML 2023: features/all_features question
Specifications
- DOM (#shadow-trees), from DOM 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