<dialog>
モーダル
や
ダイアログ
を示す
HTMLタグ
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/dialog
HTMLDialogElement.showModal()
を用いることで
<dialog>
の
フォーカス
可能な
Element
に
フォーカス
される
アクセシビリティ
として必ず
autofocus属性
を設定して
フォーカス
を明示しよう
外部の要素に
inert属性
を付与することで非アクティブを実現している
したがって
inert属性
を指して
CSS
を書くことで
スタイル
を当てることができる
また
擬似要素
の
::backdrop
が用意されるためこれに
スタイル
を当てることでも良い
状態
になる
参考
https://blog.jxck.io/entries/2024-09-26/dialog-element.html