liveBook · Manning

/deep/ selector

As explained in Web Components in Action

The /deep/ selector is a deprecated Shadow DOM CSS combinator for matching descendants across a shadow boundary.

The /deep/ selector was a Shadow DOM CSS combinator for styling descendants across a shadow boundary. It addressed cases where component isolation was useful but selected styles needed to cross into a component. section 10.2

Matching inside and outside the shadow boundary

A rule such as `/deep/ .example { color: red; }` could style matching elements whether they appeared inside a Shadow DOM component or in ordinary document markup. Unlike `::shadow`, it was intended to match across the boundary rather than only dive into shadow content. section 10.2

Treat /deep/ as historical rather than deployable CSS. It belonged to Shadow DOM v0, never entered v1, and Chrome removed support in version 63; there is no direct replacement for its functionality. section 10.2

How Web Components in Action covers it

How deep it goes
Defines the selector through a minimal rule and traces its deprecation, but does not develop a modern replacement.
Examples
Uses .example elements inside and outside a component plus a /deep/ .example rule.
What it assumes
Assumes familiarity with CSS selectors, component markup, and Shadow DOM boundaries.
What you can do after
Evaluate historical Shadow DOM CSS and recognize why /deep/ rules should not be used in current Chrome.
How it connects
Connects Shadow DOM, CSS selectors, the ::shadow selector, and CSS Variables.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.