::details-content: style expandable content without wrapper divs

1
<!-- The old way: wrapper required for styling -->
2
<details>
3
  <summary>How do I return an order?</summary>
4
  <div class="content-wrapper">
5
    <p>
6
      Visit your order page and click "Return Item". You'll receive a prepaid
7
      shipping label via email within 24 hours.
8
    </p>
9
  </div>
10
</details>

1
details::summary {
2
  padding: 1rem;
3
  background: white;
4
}
5

6
.content-wrapper {
7
  padding: 1rem;
8
  background: #f9fafb;
9
  border-top: 1px solid #e5e7eb;
10
}

1
<!-- Clean HTML, no wrapper needed -->
2
<details>
3
  <summary>How do I return an order?</summary>
4
  <p>
5
    Visit your order page and click "Return Item". You'll receive a prepaid
6
    shipping label via email within 24 hours.
7
  </p>
8
</details>

1
details::summary {
2
  padding: 1rem;
3
  background: white;
4
}
5

6
details::details-content {
7
  padding: 1rem;
8
  background: #f9fafb;
9
  border-top: 1px solid #e5e7eb;
10
}

1
details::details-content {
2
  opacity: 0;
3
  transition:
4
    opacity 300ms,
5
    content-visibility 300ms allow-discrete;
6
}
7

8
details[open]::details-content {
9
  opacity: 1;
10
}