← Back to release summary

Improvements to styling structure of <details> and <summary> elements

Category
DOM
Type
New or changed feature
Status
Enabled by default (Chrome 131)
Intent stage
None

Summary

Support more CSS styling for the structure of <details> and <summary> elements to allow these elements to be used in more cases where disclosure widgets or accordion widgets are built on the web. In particular, this change removes restrictions that prevented setting the display property on these elements, and adds a ::details-content pseudo-element to style the container for the part that expands and collapses.

Motivation

This is part of a set of work to enable wider use of platform widgets for the disclosure and accordion patterns. Making the existing <details> and <summary> elements more styleable addresses a major reason that developers build their own rather than using the widget provided by the platform. This widget provided by the platform hopefully has more consistent interaction behavior, accessibility, etc., and it is thus better for users if more developers are willing to use it.

Standards & signals

Explainers: https://github.com/dbaron/details-styling https://dbaron.github.io/details-styling/phase-1

View on chromestatus.com