ドロップダウンとポップオーバーのパターン

HTML の Popover API（Chrome 114 以降、広くサポートされています）は、宣言的な表示・非表示の動作を提供します。対象要素に popover 属性を、トリガーボタンに popovertarget を指定します。基本的な開閉に JavaScript は必要ありません。ライトディスミス（外側をクリックして閉じる）や Escape キーの処理も含まれます。

[popover] または :popover-open を使ってポップオーバー要素を対象にします。背景を暗くするために ::backdrop 疑似要素も利用できます。ポップオーバーは dialog と同様に top layer に描画されるため、z-index の重なり順に関する問題は発生しません。

CSS Anchor Positioning（Chrome 125 以降）を使うと、JavaScript なしでポップオーバーをトリガーに対して相対的に配置できます。トリガーに anchor-name: --btn を、ポップオーバーに position-anchor: --btn を指定し、top: anchor(bottom); left: anchor(left) でトリガーの下に揃えます。

Anchor Positioning を使えない場合は、位置指定された親ラッパーを使います。コンテナに position: relative を、ドロップダウンに position: absolute; top: 100%; left: 0 を指定します。これはブラウザーを問わず動作しますが、位置指定されたコンテナ内でトリガーとドロップダウンを兄弟要素にする必要があります。

ドロップダウンリストには position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px を指定します。メニュー項目にはパディング、ホバー時の背景色、全幅表示を設定します。

@starting-style で表示時のアニメーションを、transition-behavior: allow-discrete で display プロパティの変更をアニメーションさせます。これにより、ポップオーバーの開閉状態に連動した表示・終了アニメーションを CSS だけで実現できます。

ドロップダウンメニューはキーボード操作に対応する必要があります。矢印キーでメニュー項目間を移動し、Enter/Space でフォーカス中の項目を実行し、Escape でメニューを閉じてトリガーにフォーカスを戻します。Popover API は Escape を自動的に処理しますが、矢印キーによる移動には JavaScript のイベント処理が必要です。

Popover API を使わないカスタムドロップダウンでは、トリガーに aria-haspopup="listbox" と aria-expanded を、リストに role="listbox" を、各項目に role="option" と aria-selected を追加します。スクリーンリーダーは、展開状態と項目数を読み上げます。

トリガーの下に配置したドロップダウンは、画面下部でビューポートからはみ出すことがあります。IntersectionObserver または getBoundingClientRect でこれを検出し、ドロップダウンをトリガーの上に反転させます。CSS Anchor Positioning では position-try-fallbacks を使って処理できます。

ネストされたドロップダウン（サブメニュー）を追加すると、処理が複雑になります。サブメニューは親項目の右側に配置します。mouseout 時に CSS の transition-delay または JS の timeout を使って非表示までに遅延を設けると、マウスが斜めに移動したときにサブメニューが閉じるのを防げます。

ホバーをトリガーにしたドロップダウンは、ホバー状態がないタッチデバイスでは機能しません。どのデバイスでもクリックまたはタップをトリガーに使います。ポップオーバー API のライトディスミス、または開いているドロップダウンを閉じる document の click リスナーを使うと、外側をタップして閉じる動作を実現できます。

Popover API は、以前はカスタム JavaScript が必要だったどのような処理を自動的に提供しますか？

Popover API と CSS Anchor Positioning を組み合わせると、宣言的で JavaScript をほとんど使わないドロップダウンおよびポップオーバーのパターンを実現できます。より広いブラウザー対応が必要な場合は、位置指定されたコンテナのパターンが安定して機能します。キーボードアクセシビリティ、ARIA 属性、ビューポートとの衝突処理、タッチデバイスへの対応を加えることで、実運用に適したドロップダウンコンポーネントが完成します。