Popover API とは？

今まで「ボタンを押したらメニューが出る」UIをJavaScriptで作っていたのが、HTML属性だけで実現できるようになったんだよ。ブラウザが開閉・位置・z-indexを全部面倒見てくれるんだね。

ボタンに`popovertarget="メニューのid"`、メニュー要素に`popover`属性を付けるだけだよ。それだけでボタンクリックでメニューが表示・非表示されるんだね。

dialogはモーダル（背面を操作不可にする）が主目的なんだ。Popover APIはモーダルでなく、メニューやツールチップのような「軽い」オーバーレイ向けで、画面外をクリックすると自動で閉じるんだよ。

複数のポップアップが重なったとき、どれが前面に来るかをz-indexで管理するのがとても大変だったんだ。Popover APIはトップレイヤーという特別な場所に自動で表示されるから、z-index競合が起きないんだよ。

2024年にはChrome・Firefox・Safari・Edgeすべてで標準サポートされたんだよ。JavaScriptライブラリが担っていた仕事をブラウザネイティブで置き換えられる、Webプラットフォームの進化のいい例だね。