outside()
triggersince 0.3requires runtimeAn event for :on() that happens outside the matched element: a click, a pointer press or focus moving elsewhere on the page.
On this page · 9 sections+−
Syntax
:on(outside(click | pointerdown | focusin)) { --state: <mutation>; }:on()Rule · hover any red tokenAn event rule: when the event happens on the matched element (or inside it, for bubbling events), the rule’s state mutations run. The cascade picks one winning mutation per state, per trigger and per element.Reference →
Parameters
- event
click,pointerdownorfocusinrequired - The event to watch on the rest of the page.
Effect
An event for an :on() rule. The rule's mutations run when the event's target is outside the matched element.
Example
menu.cssreactive
.dropdown { --open: state(false);}.dropdown:on(outside(click)) { --open: set(false);}.dropdown:on(keydown(Escape)) { --open: set(false);}state()Function · hover any red tokenMakes each matching element the owner of an independent state with an initial value.Reference →
Behavior
- Shadow DOM aware.
stop()on an element inside the matched one does not affect it.- Costs about 0.35 µs per component per outside click in the 0.3 benchmark.
Supported contexts
- As the event of an
:on()rule.
Limitations
- Doesn’t move focus. For popups, the native
popoverattribute already does light dismiss: prefer it. prevent()` and `stop()are compile errors withoutside().
Examples
- Context menu · API examples, runs the real runtime
Related
Experimental · syntax may change between minor versions