Shadow DOM
A web standard that provides encapsulation for JavaScript, CSS, and templating in a web component.
Detailed Explanation
Shadow DOM allows developers to attach a hidden, separate DOM tree to an element. This 'shadow tree' is isolated from the main document's DOM, meaning styles defined inside the shadow DOM won't leak out, and global styles won't leak in (unless specifically allowed). This is a core technology behind Web Components, enabling truly modular and reusable UI elements that look and behave consistently regardless of where they are placed.
Quick Summary
Shadow DOM is a browser feature that attaches an isolated DOM subtree to an element so its markup, styles, and scripts cannot collide with the surrounding page. It is the encapsulation primitive behind native Web Components.
Key Takeaways
- Each shadow root creates a scope boundary, selectors and class names inside cannot match elements outside.
- Styles defined in a shadow root do not leak out, and most outer page styles do not leak in (custom properties do).
- Shadow DOM is what makes built-ins like <video>, <input type="date">, and <details> look the same across sites.
- Open shadow roots are scriptable from outside via element.shadowRoot; closed ones are not.
- It pairs with <slot> for composition: light DOM content the page provides gets rendered into named slots.
When to use it
- Building reusable web components that need style isolation across host applications.
- Embedding third-party widgets (chat, video, payments) without their CSS bleeding into the host page.
- Implementing design systems where component internals must stay opaque to consumers.
- Theming via CSS custom properties that pierce the shadow boundary intentionally.
Common Mistakes
- Trying to style shadow internals from outer CSS, only inherited properties and custom properties cross the boundary.
- Assuming document.querySelector reaches into shadow trees, it does not; you must traverse shadowRoot explicitly.
- Forgetting that event.target is retargeted at the shadow boundary, which can break delegated listeners.
- Using shadow DOM where simple CSS scoping (CSS Modules, Tailwind) would suffice and avoid extra complexity.
Shadow DOM, Frequently Asked
Is Shadow DOM the same as iframes?
No. Iframes load a separate document with its own JavaScript globals and security origin. Shadow DOM is a lightweight subtree inside the same document, it shares the same window, but its CSS and DOM queries are scoped.
Can global CSS reset styles inside a shadow root?
No, with one exception: inherited CSS properties (color, font, custom properties) cross the boundary. Class-based resets and element selectors stop at the shadow root.
Do React or Vue use Shadow DOM?
Not by default. They use virtual DOM for diffing but render into the light (regular) DOM. You can manually mount them into a shadow root, but it is uncommon outside web-component wrappers.