Shadow DOM
Shadow DOM is a web platform mechanism for attaching a DOM subtree to an element while encapsulating its structure and styles from the surrounding document.
Web Components in Action
Shadow DOM is a web platform mechanism that attaches an encapsulated DOM subtree to an element and isolates its internal structure and styling from the surrounding document.
- How it is used
- Protects custom-element internals from accidental document queries and page-level CSS collisions.
- How deep it goes
- Works through root creation, access modes, CSS isolation, constructor timing, and compatibility fallbacks; treats closed mode as impractical rather than secure.
- Examples
- Uses a date input’s hidden UI, an exposed component query, a styled stepper, and a slider conversion.
- What you can do after
- Build it from scratch with `attachShadow`, scope internal DOM and CSS, and choose a fallback when native support is unavailable.
CSS in Depth, Second Edition
Shadow DOM is a web platform mechanism that creates an isolated DOM subtree with encapsulated structure and styles.
- How it is used
- Isolates web-component structure and styles from the surrounding page when a component must remain self-contained.
- How deep it goes
- Contrasts isolation and cascade behavior with CSS scope but stops short of implementation because JavaScript-driven details are outside treatment.
- Examples
- Uses an embedded social-media widget as an example of a reusable component requiring identical appearance across websites.
- What you can do after
- Evaluate whether strong component isolation or cooperative page-wide styling better fits a widget or module.
Related concepts
- Web Componentsused by · Web Components are browser standards and APIs, including custom elements and shadow DOM, for creating reusable web interface elements with encapsulated structure, presentation, and behavior.
- shadow rootpart of · A shadow root is the root node of an encapsulated Shadow DOM subtree attached to a host element.
- CSS variableused by · A CSS custom property is an author-defined property, typically named with a leading double hyphen, whose value can be inherited and referenced in other declarations.
- encapsulationimplements · Encapsulation is a software design principle that contains state and implementation details behind a controlled interface, limiting direct access from outside.
- Custom Elementspart of · A custom element is an author-defined HTML element that represents application-specific content or behavior beyond that of built-in HTML elements.
- CSS rulecontrasts with · A CSS rule associates a selector with declarations that specify styles for matching elements.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.