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

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

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

See the Pen combo-box & dialog (pure javascript) beta by cfd-ack (@cfd-ack) on CodePen.

動作確認
・Google Chrome 104
・FireFox 104

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

ポイント

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

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