<details>/<summary> rendering

[nt1m]

Description

The WebKit implementation of those elements is completely out of date, and causes a lot of pain for web developers:

• ::marker can't be used, WebKit implements ::-webkit-details-marker instead(bug 157323)
• list-style and display does not affect the details marker (bug 264381)
• element.checkVisibility() does not work properly on elements in the default slot (bug 264733)
• summary::before does not appear in the correct order (bug 61426)
• details::before/after does not appear in the correct order (bug 61766)

Also add support for ::details-content

Specification

https://html.spec.whatwg.org/#the-details-and-summary-elements

Additional Signals

Standards Positions

WebKit: WebKit/standards-positions#351
Gecko: mozilla/standards-positions#1027

---

Site breakage and workaround

Browser Bugs

Likely Compatibility Impact

See: https://bugs.webkit.org/showdependencytree.cgi?id=252223&hide_resolved=1

---

Developer surveys

Other Developer Sentiment

There were some mentions in State of HTML/CSS

[yisibl]

::details-content has shipped in Chrome 131 and introduces a new concept: part-like pseudo-elements.

This means that selectors such as the following are valid:

• ::details-content::before
• ::details-content::after
• ::details-content::first-line
• ::details-content::first-letter
• ::details-content::selection
• ::details-content:hover
• and more…

[o-t-w]

Safari Technology Preview has added support for the ::details-content pseudo-element and also implemented <details> and <summary> disclosure triangle as a list item.

You can now use summary::marker in Safari Technology Preview but because of this bug the only thing you can change about the disclosure triangle is its color :(