dialog要素に::backdrop擬似要素が使えるようになった

Safari 15.4がdialog要素と::backdrop疑似要素をサポートし、全モダンブラウザで利用可能になった。

dialog.style.display = "none" や dialog.style.display = "block" のようなスタイルの変更を行わずに、ダイアログの背景を制御できるようになった。

<dialog id="confirm-dialog">
   ...
</dialog>

dialog::backdrop {
  /* マスクの背景色 */
  background-color: rgba(0, 0, 0, .3);
}

const dialog = document.querySelector('#confirm-dialog')

dialog.showModal()
dialog.close()