この記事はCommune Advent Calendar 2024シリーズ2 12日目の記事です。
Safari 17 からほぼ全てのブラウザでサポートされるようになったPopover API。
いわゆるポップオーバー的なUIの実装に使うものだが、
「position:absoluteとz-indexを使ったらどうにでもなるんじゃない？」
という風に思っていた。多くのケースではそれで十分かもしれない。
しかし、Popover APIが真に便利なケースが2つあるのでそれについて紹介したい。
閉じる処理の実装が楽
「特定の要素をクリックしたときにその要素の近くにポップオーバー要素を開く」という実装は特に抵抗無くできそうだが、問題は閉じるとき。
「ポップオーバー要素が開いているとき、ポップオーバー"以外の"要素を押すとポップオーバー要素を消す」という実装をするためには、かなり広域にイベントハンドラを登録する必要がある。この実装は難しい訳では無いが、かなり気持ち悪い感じがする。
その点、Popover APIであれば、ポップオーバー以外の要素を押したときに消えるかどうかを簡単に選択し、制御させることができる。
無駄なイベント処理を定義する必要がなくなるわけだ。
overflow: hiddenな要素の中でも使える
Popoverには Promotion to the top layer(最上位レイヤーへの昇格) という仕様がある。
レイヤー構造を無視し、最上位のレイヤーとして扱われるというものだ。
これは例えばテキストエディタのテキストエリア(ブロック要素)を何らかの事情でoverflow:hiddenにしていた場合、テキストエリアの子孫要素としてポップオーバーさせたい要素を扱うと、その要素はテキストエリアを出ることができなくなってしまう。
しかしpopover機能を使うことで、ポップオーバー要素は強制的に最上位レイヤーに昇格するため、問題なくその要素は表示される。これはかなり便利だ。
Discussion