Chris Ferdinandi (@cferdinandi.bsky.social)

Revisiting how to dismiss native HTML dialog elements when the backdrop is clicked Last month, I wrote about how to dismiss native HTML dialog elements when the backdrop is clicked using the [closedby] attribute. My buddy Konnor Rogers shared a great little trick for handling it in browsers that don’t have support yet. By default, browsers treat the ::backdrop on a <dialog> element as part of the <dialog> itself. That makes detecting clicks outside of the <dialog> with JavaScript difficult… document.addEventListener('click', (event) => { // This logs the <dialog> element when you click the ::backdrop console. https://gomakethings.com/revisiting-how-to-dismiss-native-html-dialog-elements-when-the-backdrop-is-clicked/