<dialog closedby="any">が便利すぎる

2026年03月07日

dialog要素のclosedby属性がとにかく本当に便利だ…という話です🍣

showModal()が出てきた時、フォーカスの閉じ込めをブラウザがやってくれるようになったニュースでも感動しましたが、ついに簡易非表示機能ライトディスミスまでブラウザがやってくれるようになりました^[1]。

やることは`closedby="any"`をつけるだけ！！！！

closedby="any"を付けるだけで、ESCキー押下や::backdropクリックでダイアログが閉じられるようになります^[2]。

値	説明
`none`	開発者が用意した方法だけで閉じられる
`closerequest`	標準の操作でのみ閉じられる（ブラウザでのESCキー、など）。
`any`	`::backdrop`をクリック、標準の操作、開発者が用意した方法の３通りで閉じられる。

もうkeydownを拾ったり、dialog要素にclickイベントハンドラ渡してクリックされたのが中身かどうか判定したりする必要もなくなるんだ…。

残念ながらSafariが未対応なため実務で使うには気が早いですが、Chrome拡張や社内ツールなどではバチバチに使っていきたいですね。

Interop 2026で名前が上がっている仕様なので、年内になんとか対応されてほしいところですが果たして…。https://web.dev/blog/interop-2026?hl=ja#dialogs_and_popovers

dialog要素が生まれる前からどれだけダイアログUIを作ってきたかわかりません😂。「ESCキーで閉じる」「::backdrop（暗い背景）クリックで閉じる」といった機能、これまで何回実装したことか…🛞🔨

はやくclosedbyが当たり前になって欲しいです🙏たのみます🙏🙏

[^1]:記事執筆時点ではSafari未対応（https://caniuse.com/?search=closedby）
[^2]:closedby属性がない場合、ダイアログの開き方によって挙動が変化します。モーダルとしてshowModal()で開いたならデフォルト値はcloserequest扱いになり、ESCキーで閉じることができます。モードレスとしてshow()で開いたならnoneがデフォルト値として扱われます。