v131 · dom

Dialog Toggle Events

It is useful for web authors do determine when their <dialog> elements open and close. popover already has `ToggleEvent` which is dispatched when a popover opens or closes, but <dialog> does not. The current way to detect when a <dialog> opens is to register a mutation observer to check for open, however, this is quite a lot of work where an event would be e

concepts

  1. Dialog ToggleEvent

    <dialog> fires toggle events like <details>.

  2. Nested dialog stack

    Use the new toggle events to track an open-dialog stack across nested modals without mutation observers.

  3. Animation hook + @starting-style

    Pair beforetoggle with @starting-style and allow-discrete to animate the dialog in and out fully declaratively. Speed slider live-tunes the transition duration.

  4. Cancel a close with a dirty guard

    requestClose() fires cancel before the dialog closes. Pair that cancellable event with a dirty-form flag to ship the canonical "are you sure?" confirmation prompt.

  5. History-Aware Dialog

    Use the toggle event to mirror dialog open/closed state to location.hash via history.pushState(). The Back button closes the dialog; sharing the hashed URL re-opens it on load. No router library needed.

  6. beforetoggle Interceptor

    A multi-step wizard that routes close attempts through requestClose() and cancel, then uses beforetoggle to log the final close transition.

why it shipped

It is useful for web authors do determine when their <dialog> elements open and close. popover already has `ToggleEvent` which is dispatched when a popover opens or closes, but <dialog> does not. The current way to detect when a <dialog> opens is to register a mutation observer to check for open, however, this is quite a lot of work where an event would be e

references