9 Shadow CSS

This chapter deepens the exploration of the Shadow DOM by focusing on CSS encapsulation. It explains how global CSS leads to style creep—rules unintentionally leaking into or out of components—and presents the Shadow DOM as a practical fix. By giving each component its own DOM tree, styles are scoped by default, enabling simpler, component-local selectors and the safe reuse of IDs inside each shadow root while avoiding collisions with page styles.

Using a stepper example, the chapter shows how page-level button rules can override component styles through selector specificity and naming collisions, and how moving markup and styles into a shadow root prevents that. It introduces the :host selector to style the shadow host, its variant :host(.class) for mode- or state-based styling, and clarifies the nuance that inheritance can still flow from ancestors because it isn’t selector-based; when necessary, :host { all: initial } can reset inherited properties. The core rule is that outside selectors cannot target nodes inside a shadow tree, but inheritance may still apply unless explicitly reset.

To practice these ideas, the chapter builds a small Workout Creator app composed of Shadow DOM components: an application shell that uses flex layout via :host, a scrollable exercise library, a workout plan list, and an adaptable wkout-exercise tile that differentiates types with :host(.cardio) and :host(.strength). It demonstrates reflecting attributes to properties, rendering data into components, and preferring IDs inside shadow roots for straightforward selection and styling. The chapter closes by refitting a slider component to use the Shadow DOM, simplifying initialization and CSS, and reinforcing how encapsulation reduces brittleness and makes component styling predictable.