Examples

Close several dialogs at once

A single Action can target several components at once. Here one button closes both a centered Dialog and a drawer by targeting every Dialog matching the [data-can-be-closed] attribute selector.

Prevent default

Debounce modifier

Use the debounce modifier to prevent firing the action's effect too often.

Side effects on a popover

Action listens to real DOM events, so it can react to native ones too. Here a <dialog> uses the Popover API for the whole modal mechanics — open, close, Esc, click-outside, focus and top-layer stacking — with no JavaScript. Action only wires the one thing the platform does not provide: locking the body scroll, by listening to the popover's toggle event and reading its newState.