Shadow DOM
- Pronunciation
- SHAD-oh DAHM
In short
The shadow DOM is a browser feature that attaches a hidden, separate DOM tree to an element, so its markup and styles stay isolated from the rest of the page.
What is the shadow DOM?
Normally every element and style rule on a page lives in one shared DOM tree, so a CSS rule written for one part of the page can accidentally change another. The shadow DOM fixes this for components. Calling attachShadow() on an element, the shadow host, gives it a shadow root: the top of a separate tree that the page's normal querySelector calls don't reach, whose styles don't leak out and into which the page's styles don't leak.
The shadow DOM is one of the standards behind Web Components, together with custom elements and the <template> element. Content written between a component's tags, called the light DOM, appears inside the shadow tree wherever it places a <slot>. A few things cross the boundary on purpose: inherited properties such as color and font-family, CSS custom properties for theming, and parts the component exposes for ::part(). Browsers use the same mechanism for their own controls, such as the buttons of <video> and the slider of <input type="range">.
A shadow root is like a room with its own decoration rules inside a shared house: what is painted inside stays inside, and the house's wallpaper doesn't cover its walls. With declarative shadow DOM, a <template shadowrootmode="open"> element in the HTML creates the shadow root without JavaScript, so server-rendered components show correctly before any script loads; all major browsers have supported it since 2024.
The shadow DOM is often confused with the virtual DOM, but they are unrelated. The virtual DOM is a JavaScript copy of the UI that libraries such as React compare to work out which real DOM changes to make; the shadow DOM is part of the browser's real DOM and creates an encapsulated subtree. A closed shadow root, created with mode: "closed", hides its tree from outside scripts, but that is encapsulation, not a security boundary.
Key takeaways
- The shadow DOM attaches a separate, encapsulated DOM tree to an element.
- Styles inside don't leak out, and page styles don't leak in.
- It is a core part of Web Components;
<slot>shows the element's own content. - Declarative shadow DOM lets HTML create shadow roots without JavaScript.
- It is unrelated to the virtual DOM, the in-memory copy used by UI libraries.
Example
class UserCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: "open" });
shadow.innerHTML = `
<style>p { color: royalblue; font-weight: bold; }</style>
<p><slot></slot></p>
`;
}
}
customElements.define("user-card", UserCard);
// <user-card>Ada Lovelace</user-card>
// The p rule styles only this card; other <p> elements on the page are untouched.Readers ask
What is the difference between the shadow DOM and the virtual DOM?
The shadow DOM is a browser feature that gives an element its own isolated tree of elements and styles. The virtual DOM is a JavaScript copy of the UI that libraries such as React compare to update the real DOM. They solve different problems.
Can I style elements inside a shadow DOM from outside?
Not with normal selectors. A component can offer hooks instead: CSS custom properties, which pass through the boundary, and named parts that outside CSS targets with ::part(). Inherited properties such as color and font-family also flow in.
Do I need the shadow DOM to make a web component?
No. A custom element works without one. The shadow DOM adds isolation of markup and styles, which helps widgets that must look the same on any page.
See also
- DOMWeb Development, p. 17The DOM is the browser's in-memory tree of objects representing a web page, which JavaScript can read and change to update what the user sees.
- Virtual DOMWeb Development, p. 63The virtual DOM is a lightweight copy of a page's element tree kept in JavaScript memory, which UI libraries compare to update the real DOM efficiently.
- UI ComponentWeb Development, p. 61A UI component is a self-contained, reusable piece of an interface, such as a button, a form or a card, that bundles its markup, style and behavior.
- CSSWeb Development, p. 14CSS is the style sheet language that controls how HTML content looks on screen, including colors, fonts, spacing, layout, and animations.
- HTMLWeb Development, p. 22HTML is the markup language that defines the structure and content of web pages, such as headings, paragraphs, links, images, and forms.
- EncapsulationProgramming Fundamentals, p. 22Encapsulation is the practice of bundling data with the methods that use it and hiding internal details, so outside code works only through a public interface.
Sources
Spotted a mistake or something missing on this page?Suggest an edit