CSS Dialog Light Dismiss with closedby Attribute
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.
/* JS: detect click outside dialog bounds */dialog.addEventListener('click', (e) => { const rect = dialog.getBoundingClientRect(); if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) { dialog.close(); }});<dialog closedby="any"> Click outside or press ESC to close</dialog>dialog closedby Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
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.