💬
Popover API
HTMLネイティブポップオーバー/モーダル実装
モーダルやポップオーバーUIを実装するにはz-index管理、フォーカストラップ、ESCキーでの閉じ、背景クリックでの閉じなど複雑なロジックが必要でした。HTML popover属性を使えばブラウザがこれらすべてをネイティブで処理します。
popovertarget属性でトリガーボタンを接続し、トップレイヤーで自動レンダリングされるためz-index問題から解放されます。アクセシビリティ機能もデフォルトで内蔵されています。
適用方法
1
ポップオーバーコンテンツ要素にpopover属性を追加する
2
トリガーボタンにpopovertarget="ポップオーバーID"を指定する
3
::backdrop擬似要素で背景オーバーレイをスタイリングする
4
popover=manualでプログラム的制御が必要な場合を処理する
メリット
- ✓ z-index管理、フォーカストラップ、ESC閉じが自動処理される
- ✓ アクセシビリティ（ARIA）がデフォルト内蔵で追加作業不要
デメリット
- ✗ 複雑なモーダルシナリオ（ネストされたモーダルなど）は追加処理が必要な場合がある
- ✗ 既存のモーダルライブラリとの混用時に衝突が発生しうる
ユースケース
設定パネルやフィルタードロワーの実装
確認ダイアログをライブラリなしで実装