html5 の <dialog> をポップアップ部品として利用できるか試してみた

定番のコンボボックス（ドロップダウンリスト部）だけですけどね。

とりあえず要件は
・コンボボックスは key-name ペアのリストを表現する複数列リストとする。
・モーダルダイアログ上でも問題なく機能するよね。

動作確認
・Google Chrome 104
・FireFox 104

方向性を見定めるお試し版ということで、素のJavascriptで適当に書いてましたが・・・
（あれ？おかしいな？お試し版って300行もあるっけ・・・

ポイント

ポップアップ（dialog）の位置はユーザーエージェントのスタイルを
　上書きで消して、絶対座標配置となるようにした。
zindexは不要（html/css/jsいずれも一切記述していません）
　ただし dialog は body 直下の最後に移動する。
モーダル上でポップアップさせる場合はモーダルの最後に配置し
　親モーダル dialog を overflow:visible にする必要がある。
（同じポップアップをページ本流側とモーダル上とで流用するため
　ポップアップ dialog ごと引っこ抜いて body/dialog の最後に移動させている。）
[ESC]キーを preventDefault() しないと親モーダルが閉じてしまう。

※コンボボックス本体の機能は本題ではないので、いくつも手抜きがあります。
　（マルチカラム前提とかページスクロール時の考慮とかオートコンプリートとか）
※リストアイテムの button タグは不要です。（labelのみで実装可能。← 整理してない