Popover APIで背景の要素をクリックできないようにする方法

HTMLのPopover APIを使うと、JavaScriptを使わずにHTMLのみでポップオーバーを実装できます。また、CSSの::background疑似要素を利用することでポップオーバーの背景を暗くしたりぼかしをかけたりできます。

しかし、MDNで次のように説明されているとおり、ポップオーバーを表示しているときでもポップオーバー以外の部分はクリック可能な状態になっています。

- モーダルというのは、ポップオーバーが示されている間、ページの残りの部分は、ポップオーバーが何らかのアクションを起こすまで（例えば、重要な選択がなされるまで）、反応しないようにレンダリングされるということです。
- 非モーダルというのは、ポップオーバーが表示されている間も、ページの残りの部分が反応するようにするということです。

ポップオーバー API を使用して作成されたポップオーバーは常に非モーダルです。

——『 ポップオーバー API - Web API | MDN 』

つまり、::background疑似要素をクリックすることでポップオーバーを非表示にできますが、このときに疑似要素の下にある要素にクリックが「貫通」してしまうということです。

これを防ぐには、次のようなCSSを適用します。

1
body:has([popover]:popover-open) {
2
    pointer-events: none;
3
}
4

5
[popover]:popover-open {
6
    pointer-events: auto;
7
}

:popover-open 疑似要素を活用することで、ポップオーバー要素が表示されているときにのみスタイルを適用できます。

この特性を利用して、ポップオーバーが表示されているときにはbody要素をクリック不可に設定し、ポップオーバー要素内はクリックできるようにします。

また、user-selectプロパティを使うことで、ポップオーバーが表示されているときにテキスト選択を無効にすることもできます。

1
body:has([popover]:popover-open) {
2
    pointer-events: none;
3
    user-select: none;
4
}
5

6
[popover]:popover-open {
7
    pointer-events: auto;
8
    user-select: text;
9
}