IE11のサポートが終了して遂に色々なタグが自由に使えるようになってきました。
今まで使いたくても対応が面倒なので全部divにしていた要素の一つ、dialog要素を実装していて::backdropの部分をクリックして閉じるにはどうすればいいのか調べた際のメモです。

やりかた

dialog要素がクリックされた際、getBoundingClientRectでdialog要素の寸法を調べ、クリックされた位置がdialog要素の内か外かをチェックし、要素外ならclose()を発動させる。

const dialog = document.getElementsByTagName("dialog")[0];
const button = document.getElementsByTagName("button")[0];
button.addEventListener("click", (event) => {
  dialog.showModal();
});
dialog.addEventListener("click", (event) => {
  const rect = dialog.getBoundingClientRect();
  const inDialog =
    rect.top <= event.clientY &&
    event.clientY <= rect.top + rect.height &&
    rect.left <= event.clientX &&
    event.clientX <= rect.left + rect.width;
  if (!inDialog) {
    dialog.close();
  }
});

DEMO

See the Pen Untitled by ONSEN (@TaroTsujimoto) on CodePen.