もうすぐリリースされるChrome 134の新機能の中で、特に興味深い変更があったので紹介します。
※2025/2/22現在の情報のため、リリースまでの間に変更される可能性があります。

Dialog要素の新しい閉じ方

Chrome 134では、要素の閉じ方を制御できる closedby 属性が新たに追加されます。これにより、従来JavaScriptで実装していた処理をHTMLだけで実現できるようになります。
書かれているChromeの開発者向けのBlogはこちらです。

公式ブログ

[概要]
Dialog light dismiss
One of the nice features of the Popover API is its light dismiss behavior. This feature brings the same capability to <dialog>. A new closedby attribute controls behavior:

<dialog closedby=none>: No user-triggered closing of dialogs at all.
<dialog closedby=closerequest>: Pressing ESC (or other close trigger) closes the dialog.
<dialog closedby=any>: Clicking outside the dialog, or pressing ESC, closes the dialog. The same as popover=auto behavior.

変更点の概要

これまでの課題

従来、要素を閉じるには close() メソッドを呼び出す必要がありました。

ボタンを押して閉じる処理は比較的簡単に実装可能ですが、背景をクリックしたときに閉じる処理はクリック位置を判定し、背景なのかDialog内部なのかを判断する必要がありました。

この問題を解決するために、Chrome 134で closedby 属性が導入されます。

closedby 属性の動作

設定値	動作
any	ESCキーまたは範囲外クリックで閉じる
closerequest	ESCキーで閉じる（背景クリックでは閉じない）
none	ESCキーでも背景クリックでも閉じない

コードの比較

これまでの実装（JavaScriptで処理）

dialog.addEventListener("click", function (event) {
    const dialogRect = dialog.getBoundingClientRect();
    if (event.clientX < dialogRect.left
        || event.clientX > dialogRect.right
        || event.clientY < dialogRect.top
        || event.clientY > dialogRect.bottom) {
        dialog.close();
    }
});

Chrome 134以降の実装（HTMLだけで完結）

<dialog closedby="any">
~Dialogの表示する要素を記述
</dialog>

このように、HTMLの属性を設定するだけで背景クリック時の閉じる処理を実装できます。

リリースについて

環境	リリース予定	リンク
Chromeブラウザ	2025/3/4	https://developer.chrome.com/blog/chrome-134-beta?hl=ja
Microsoft Edge	2025/3/6	https://learn.microsoft.com/ja-jp/microsoft-edge/web-platform/release-notes/134

2025/2/22時点では、SafariやFirefoxの対応予定は見つけられませんでした。