v131 · dom

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

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

concepts

  1. <details>/<summary> styling

    <details> and <summary> get a real ::details-content pseudo + cleaner stacking. Easier to style without relying on internal slots.

  2. Exclusive accordion

    Combine name="" grouping with animated ::details-content for a no-JS FAQ widget.

  3. Grid + flex layout

    Switch a <details> between grid, flex, and block display. ::details-content is a real grid track.

  4. Animated disclosure

    Smoothly animate open and close with ::details-content, interpolate-size, and @starting-style. Duration slider live-tunes the transition.

  5. Custom Summary Marker

    Swap the disclosure triangle for arrows, plus/minus signs, dots, or emoji by styling summary::marker. A live picker switches between five marker styles and shows the resulting CSS.

  6. Nested File Tree

    A three-level project file tree built entirely from nested <details> elements. ::details-content handles indentation and smooth expand animations — no wrapper divs needed.

why it shipped

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.

references