closest()
scopesince 0.30.8 syntaxAn optional last argument for actions and bind: that targets the state owned by exactly one ancestor.
On this page · 8 sections+−
Caution · 0.8.x compatibility syntax
This page documents 0.8 syntax that Reactive CSS 0.9.0 still runs. New code uses the 0.9 form: see Legacy 0.8.x compatibility.
Syntax
<action>(…, closest(<selector>))Parameters
- selector
<complex-selector>required - Which ancestor owns the state, like
Element.closest().
Effect
No value. It changes which state cell the action or binding uses.
Example
tabs.cssreactive
.tab { on: click(set(--active, sibling-index(), closest(.tabs)));}.form input { bind: --name closest(.form);}on:Declaration · hover any red tokenConnects triggers to the actions they run. A normal declaration: specificity, source order, @media and :hover decide which one applies. 0.8 syntax, still supported in 0.9.Reference →
Behavior
- Without it, the nearest owner is used. With it, the state must be owned by exactly that ancestor.
- No 0.9 form. A mutation in an
:on()rule always changes the nearest owner. For an explicit owner, keepon:withclosest(), which is supported in 0.9.
Supported contexts
- Last argument of
set(),toggle(),increment(),decrement(),cycle(); after the name inbind:.
Limitations
- Ancestors only.
Related
Experimental · syntax may change between minor versions