How to close the new html <dialog> tag by clicking on its ::backdrop

Question

I didn't find any built in solution or workaround for closing the html5 element by clicking on its background(::backdrop), although it's clearly a basic functionality.

Answer 1

Backdrop clicks can be detected using the dialog bounding rect.

var dialog = document.getElementByTagName('dialog'); dialog.showModal(); dialog.addEventListener('click', function (event) {     var rect = dialog.getBoundingClientRect();     var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height       && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);     if (!isInDialog) {         dialog.close();     } });