CSS Highlight Inheritance

concepts

1. Highlight Inheritance

   Custom Highlight and ::selection styles now inherit per the spec. Stops needing to repeat highlight rules at every nesting level.

2. Overlapping highlights

   The editor-tooling case: spell, grammar, comment, and selection layered over the same text. Each highlight type cascades on its own chain so styles don’t bleed.

3. Cascade Debugger

   Side-by-side ::selection cascade. Pick colours on the root + a nested block, toggle old vs new inheritance model, watch which descendants pick up the parent style.

4. Custom Highlight API

   Layer real Highlight registries (spell, grammar, todo, quote) onto the same DOM, see how ::highlight() now inherits through the highlight chain instead of element chain.

5. Themed Selection

   Select text, then switch themes. A single ::selection { background: var(--sel-bg); color: var(--sel-fg) } rule at the root propagates through the highlight pseudo chain to every nesting level — plain text, blockquotes, code, em — without re-declaring ::selection anywhere else. Before Chrome 134, each context required its own rule.

6. Range vs selectNodeContents

   Compare character-precise annotation (range.setStart/setEnd on text nodes) against whole-node selection (selectNodeContents). Dial a start/end character offset or pick a target node, apply both highlight methods, and see which characters each paints — including where they diverge on mixed inline markup.

why it shipped

With CSS Highlight Inheritance, the CSS Highlight pseudo classes, such as ::selection and ::highlight, inherit their properties through the pseudo highlight chain, rather than the element chain. The result is a more intuitive model for inheritance of properties in highlights. Specifically, "When any supported property is not given a value by the cascade ...

references

• ChromeStatus entry
• Spec