demo · v134

Popover parity test

The explainer’s core motivation was: <dialog> should be able to behave the way the Popover API behaves by default — Esc cancels, outside-click closes. Run the same five interactions against a dialog and a popover side-by-side and watch the events tally up. closedby="any" is the parity setting.

probing closedby attribute…

Side-by-side

<dialog closedby="any">

Modal. Backdrop blocks the page. Esc and outside-click both fire close.

I’m a modal dialog with closedby="any".

Press Esc, click outside, or use close.

<div popover="auto">

Non-modal layer. Outside-click and Esc both fire toggle.

I’m an auto popover.

Press Esc, click outside, or use close.

Event log

Elementopenclose-by-escclose-by-outsideclose-by-button
dialog0000
popover0000

The code

<!-- Light-dismiss dialog -->
<dialog id="dlg" closedby="any">
  Hello <form method="dialog"><button>close</button></form>
</dialog>

<!-- Existing popover behaviour for comparison -->
<div popover="auto">Hello</div>

see also