モーダル・非モーダルでベターな制御が異なりそう

MDN にポップオーバーは、モーダル・非モーダルがあると書いてあるのが地味に勉強になった。

そのポップオーバーがモーダルなのか・非モーダルなのかで、ベターな制御が変わってくる。もちろんプロダクトやポップオーバーの使用状況によってベターな振る舞いは変わるが以下のようなもの。

ポップオーバー外クリックでポップオーバーを閉じるべきか否か。
- モーダルの場合は領域外クリックで閉じるべき
- 非モーダルの場合は条件による
ポップオーバーを開く元の画面でショートカットが設定されていた時、どのように振る舞うべきか
- モーダルの場合は、開く元の画面のショートカットは無効化されているべき
- 非モーダルの場合は、操作性を損なわないために、ポップオーバーからフォーカスが外れている時はショートカットが動作するべき

showPopover した時だけ要素を表示する

何もしていなければ、popover を指定しても showPopover 前でも要素が表示されてしまう。

showPopover した際は popover-open という擬似クラスがつくので、その有無で要素を非表示すればいい。

#item:not(:popover-open) {
  display: none;
}

Popover が open されると ::backdrop という擬似要素が追加されるので、それにスタイルをつけることができる。下記はポップオーバー要素外に半透明の黒背景をつけた例。

#item::backdrop {
  background-color: rgba(0, 0, 0, 0.2);
}

CSS Anchor Positioning というポップオーバーを表示する際に、ある要素に対して相対的な位置に表示したyいことがありますが、今のところ併用は出来なさそうでした。あくまで現状の話で今後変わるかも知れません。

#button {
  anchor-name: --myAnchor;
}

#item {
  position: fixed;
  position-anchor: --myAnchor;
  left: anchor(right);
}

前述と同じ CSS を指定しても、ポップオーバー要素は button の真横には表示されない。ただ中央ではなく少し右にずれた位置に表示されるので、何らかの計算が行われているのかも知れない。

#button {
  anchor-name: --myAnchor;
}

#item {
  position: fixed;
  position-anchor: --myAnchor;
  left: anchor(right);
}

以下のようにスタイルを上書きすればいける。

とりあえずこれを見ればどんなことができるのか分かりそう。まだ試してないけど、複数の popover も表示できるらしい。