::details-content疑似要素でdetails要素の中身をスタイリングする

details要素に関連して::details-content疑似要素がサポートされはじめている。

執筆時点では、Chrome、Edge、Safari TP 210でサポートしている。

details要素を使うと以下のようなマークアップになる。

<details>
  <summary>概要</summary>
  <p>コンテンツ</p>
  <p>コンテンツ</p>
</details>

レンダリングされるときは以下のようなツリーになっており、::details-content疑似要素は<details>内の<summary>以外の要素を包含する形になっている。

そのため、コンテナ要素を使うことなくdetailsのコンテンツに対してスタイルを適用できる。

<details>
  #shadow-root
    <slot>
      ::marker
      <summary>概要</summary>
    </slot>
    <slot ::details-content>
      <p>コンテンツ</p>
      <p>コンテンツ</p>
    </slot>
</details>

details {}
details[open] {}

/* ▼のマーク */
::marker {
  content: "+";
}
[open] ::marker {
  content: "-";
}

/* 概要のスタイル */
details summary {}

/* コンテンツのスタイル */
details::details-content {}
details[open]::details-content {}

デモ