v132 · 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 the same toggle/ToggleEvent that <details> and popovers do. Single listener pattern for any 'is this open?' state.

  2. cancel before close

    Veto a dismissal from beforetoggle with preventDefault() — unsaved-changes guard works against Esc, backdrop, and form submit.

  3. dialog state machine

    Visualise the closed ↔ open state machine. Click show(), showModal(), close() and watch the diagram light up while every event logs with oldState and newState.

  4. CSS animation on toggle

    Three presets — fade, slide, spring — that animate dialog entrance and exit using only @starting-style, transition: overlay, and the new toggle events. Zero JS choreography.

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