How deeply does CSS in Depth, Second Edition cover Shadow DOM?

Contrasts isolation and cascade behavior with CSS scope but stops short of implementation because JavaScript-driven details are outside treatment.

Shadow DOM

As explained in CSS in Depth, Second Edition

Shadow DOM is a web platform mechanism that creates an isolated DOM subtree with encapsulated structure and styles.

Shadow DOM creates a strongly isolated DOM subtree for web components. The outer page cannot style its contents directly; the component must provide its own styles through HTML and JavaScript. section 9.3.2

Choose Shadow DOM when a component must remain visually self-contained:

Package a reusable widget whose appearance must remain identical across multiple websites. section 9.3.2
Prefer Shadow DOM over CSS scope when strong separation from the page cascade matters; use scope when the page should influence module styling. section 9.3.2

Embedded social-media widget

A widget embedded in a blog can use Shadow DOM to keep its structure and styles independent from the host page, preventing the page stylesheet from styling it directly. section 9.3.2

How CSS in Depth, Second Edition covers it

liveBook manning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

Web Components in ActionShadow 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.

Compare how 2 books explain Shadow DOM →

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.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.