v133 · dom

Dialog light dismiss

One of the nice features of the Popover API is its light dismiss behavior. This chromestatus is about bringing that same capability to `<dialog>`. A new `closedby` attribute controls behavior: `<dialog closedby=none>` - no user-triggered closing of dialogs at all. `<dialog closedby=closerequest>` - user pressing ESC (or other close trigger) closes the di

concepts

  1. Dialog Light Dismiss

    Declarative close-on-click-outside / close-on-esc for <dialog>.

  2. closedby matrix

    The 2×3 matrix: showModal() vs show() × none/closerequest/any. Open each one and see which gestures dismiss it.

  3. Escape, backdrop, and cancel

    Live event log with a toggle to preventDefault the cancel event. Shows which gesture fires what event for each closedby value.

  4. Popover vs Dialog

    closedby=any brings <dialog> in line with popover's light-dismiss UX. Side-by-side: focus trap, top-layer, backdrop, event surface — pick the right primitive.

  5. Unsaved form guard

    A document editor showing both closedby values in a real workflow: the "Discard changes?" confirmation uses closedby="none" so a stray backdrop click can't silently destroy work, while the "Saved!" toast uses closedby="any" so it dismisses frictionlessly. Event log shows every cancel, close, and returnValue.

why it shipped

Developers sometimes would like dialog elements to exhibit "light dismiss" behavior, similar to the behavior popovers get by default. Previously, this required JS-based click handlers on the dialog and awkward logic. This feature provides easy light dismiss functionality via a declarative attribute.

references