improvements to <details> styling (widget structure)

[dbaron]

こんにちは TAG-さん!

I'm requesting a TAG review of improvements to <details> styling that address styling of the widget structure.

This is a set of changes to make the <details> and <summary> elements more stylable, with the overall goal of making issues with styleability no longer be an obstacle that prevents the use of HTML's built-in elements for this type of widget.

• Explainer for this set of work: https://dbaron.github.io/details-styling/phase-1
  • Also: Earlier explainer for scoping out the overall project: https://dbaron.github.io/details-styling/ ; there may be a later phase to address marker styling but that is independent from this work to address styling the main structure of the widget.
• HTML Specification URL: Specify the rendering of <details> in more detail. whatwg/html#10265
• CSS specification URL: https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo
• Tests: https://wpt.fyi/results/html/rendering/the-details-element/details-display-type-001.tentative.html https://wpt.fyi/results/html/rendering/the-details-element/details-display-type-002.tentative.html https://wpt.fyi/results/html/rendering/the-details-element/details-display-type-001-ref.html https://wpt.fyi/results/html/rendering/the-details-element/details-pseudo-elements-001.tentative.html https://wpt.fyi/results/html/rendering/the-details-element/details-pseudo-elements-002.tentative.html https://wpt.fyi/results/html/rendering/the-details-element/details-pseudo-elements-003.tentative.html
• User research: none
• Security and Privacy self-review²: Mostly not relevant since this is not adding new capabilities but only improving the ability to combine existing capabilities.
• GitHub repo: Proposal for improvements to <details> styling openui/open-ui#744 / improve styling of <details>/<summary> elements w3c/csswg-drafts#9879
• Primary contacts (and their relationship to the specification):
  • L. David Baron (@dbaron), Google Chrome
  • Greg Whitworth (@gregwhitworth), Open UI CG co-chair
  • Mason Freed (@mfreed7), Open UI GC co-chair
  • Alan Stearns (@astearns), CSS WG co-chair
  • Rossen Atanassov (@atanassov), CSS WG co-chair
• Organization(s)/project(s) driving the specification: Google Chrome
• Key pieces of existing multi-stakeholder (e.g. developers, implementers, civil society) support, review or discussion of this specification
• Key pieces of multi-implementer support:
  • Chromium comments: primary advocate for feature
  • Mozilla comments: improved styling of <details> and <summary> elements mozilla/standards-positions#1027
  • WebKit comments: improved styling of <details> and <summary> elements WebKit/standards-positions#351
• External status/issue trackers for this specification (publicly visible, e.g. Chrome Status): https://chromestatus.com/feature/5112013093339136

Further details:

• I have reviewed the TAG's Web Platform Design Principles
• Relevant time constraints or deadlines: hoping to ship this sooner rather than later
• The group where the work on this specification is currently being done: Mix of Open UI Community Group, CSS Working Group, and WHATWG.
• The group where standardization of this work is intended to be done (if current group is a community group or other incubation venue): CSS Working Group and WHATWG
• Major unresolved issues with or opposition to this specification: No major unresolved issues currently known.
• This work is being funded by: Google.

[LeaVerou]

+1 from me, this solves a longstanding author pain point. The spec should clarify what pseudo-classes and pseudo-elements can be used on ::details-content (apologies if it's there, I didn't see it). See ::part() for an example of wording.

[dbaron]

The definition of ::details-content refers to the definition of a new part-like pseudo-element term, which is intended to make the rules for that equivalent to ::part(). Two of the things I'm hoping to do in the next few weeks are (1) implement that equivalence in the Chrome implementation and, while doing so, (2) verify that the spec actually makes the concepts match correctly.

[martinthomson]

@matatk, @plinss, and I discussed this one. Like @LeaVerou, we're enthusiastic about these changes.