Shadow DOM
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.
Status
Baseline Widely Available (since 2022-07-15)
MDN documentation
Specifications
- DOM (#shadow-trees), from DOM Workstream (WHATWG).
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
Developer signals
- 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: 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
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