`<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 :(

[wpt-interop]

Thank you for proposing <details>/<summary> rendering for inclusion in Interop 2025.

We are pleased to let you know that this proposal was accepted as part of the Details element focus area. You can follow the progress of this focus area on the Interop 2025 dashboard.

For an overview of our process, see proposal selection. Thank you for contributing to Interop 2025!

Posted on behalf of the Interop team.