モーダル

いつの間にか <dialog> がまともに使えるようになっていたのでポップオーバーと比較してみる。（ポップオーバーは要 Chrome 114 以降）

モーダル（<dialog>） ポップオーバー

仕様

• 要素の親子関係や z-index を無視した最上位レイヤーが作られる
• ESC キーを押せば閉じる（キーボードがない環境はどうするの?）
• 開いた時に背景として ::backdrop 疑似要素が作られる

<dialog>

「非モーダル」の状態もあるけどそれには触れない。

• 背後の要素にアクセスできない
• 背景をクリックしても閉じない
• モーダルダイアログの作成には、HTML ネイティブの <dialog> 要素を使用しましょう。
• 使い方のよくわからない returnValue というプロパティを持っている

ポップオーバー

• 背後の要素にアクセスできる
• 背景をクリックすると閉じる
• 単純に開く・閉じるだけならスクリプト不要
• 任意の要素（フローコンテンツだけだろうけど）をポップオーバーにできる
• 開いている状態は :popover-open 疑似クラスに css を適用できる

まとめ

<dialog> は重要なモーダル、ポップオーバーはカジュアルな感じか。← 小学生みたいな感想だな…

開いた時や閉じる時のアニメーションは transition-behavior で実現できそうなんだけど上手くいかないし面倒くさくなってやめた。たぶんまだ未実装なんだよ。