demo · v134

Cascade Debugger

A side-by-side ::selection cascade. Pick colours on the root, then on a nested block. Toggle between the old (non-inheriting) and the new (highlight-chain inheriting) model — watch which descendants pick up the parent style.

root ::selection

nested .quote ::selection

mode

Old model = element chain. New = highlight chain (the v134 ship).

Triple-click any paragraph then read the colours

The root paragraph. This bold span selects with the root style. The cascade traversal goes up the element chain by default — every text node inherits whatever colour rules apply to its closest ancestor that sets them.

Pre-highlight-inheritance, this nested block would only highlight with its own ::selection rule, ignoring the root entirely. The new model walks the highlight chain instead — so missing properties fall through to the parent highlight.

Try toggling the modes on the left and re-selecting different parts to see what each model picks up.


    

  


  

    
what the spec changed

    
Before: .quote::selection would only inherit from .quote in the element chain — not from the body's ::selection. If .quote::selection set only background-color and not color, the text colour fell back to the originating element's text colour, not the root highlight's text colour. Surprising.

    
After: missing properties on .quote::selection look up the highlight chain — meaning they walk through ::selection rules on ancestor elements first, then to ::selection defaults, only finally falling back to the originating element.

  


  

    
see also