【CSS】detailsタグで外側をクリックしても閉じるようにする

結論

details[open] summary + * {
    position: relative;
}

details[open] summary::before {
  position: fixed;
  inset: 0;
  content: "";
}

<summary>の擬似要素を画面いっぱいに広げることで、コンテンツ要素の外側をクリックした際にも閉じるようにする。

またその擬似要素がコンテンツ要素の上に重なることを防ぐためにposition: relativeを指定する。

何がしたかったか

メニューの外側をクリックしても閉じるポップアップメニューを実装する際に、下記の理由から<details>のみで実現したかった。

• 単なる折りたたみ要素なので<details>が適していると判断
  • input[type="checkbox"]はタグ本来の役割から逸れるため除外
  • そもそもモーダルではないので<dialog>は選択肢から除外
• 開閉時・背景クリック時の処理をjsで制御したくない