Dialog light dismiss without click-outside listeners
Closing a dialog when the user clicks outside required a JavaScript click listener on the backdrop. The closedby attribute gives dialogs popover-style light dismiss behavior natively.
2 Click outside or press ESC to close
3</dialog>
2dialog.addEventListener('click', (e) => {
3 const rect = dialog.getBoundingClientRect();
4 if (e.clientX < rect.left ||
5 e.clientX > rect.right ||
6 e.clientY < rect.top ||
7 e.clientY > rect.bottom) {
8 dialog.close();
9 }
10});
Browser Support for Dialog closedby
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.
One attribute
Add closedby="any" and the browser handles backdrop clicks and ESC key. No JS event wiring.
Consistent behavior
Works like popover light dismiss. Users get the same close-on-click-outside pattern everywhere.
Three modes
none (default), closerequest (ESC only), or any (ESC + backdrop click). Pick the right behavior per dialog.
How it works
The <dialog> element didn't have a built-in way to close when clicking outside. Developers had to add a click event listener, check if the click was outside the dialog's bounding rect (since clicking the ::backdrop still fires on the dialog), and then call dialog.close(). This was error-prone and needed extra code for ESC handling too.
The closedby attribute, available from Chrome 134, brings the popover's light dismiss pattern to dialogs. Set closedby="any" for full light dismiss (backdrop click + ESC), closedby="closerequest" for ESC-only, or closedby="none" to disable user-triggered closing entirely. The browser handles all the hit-testing and keyboard events natively.