Design docs
https://open-ui.org/components/select
<https://open-ui.org/components/select>
Summary
Customizable <select> allows developers to take complete control
of the rendering of <select>, including the ability to fully
customize both the in-page “button” element as well as the popup
picker, with arbitrary content within options. Developers can opt
in to this new behavior with a simple CSS declaration that uses a
new `base-select` value for the `appearance` property.
This new capability has been in development for a very long time,
starting in late 2019
<https://www.youtube.com/watch?v=ZFvPLrKZywA>in earnest (with the
original explainer
<https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ControlUICustomization/explainer.md>from
June 2020). Due to that early work, two other platform APIs were
identified as prerequisites for customizable-<select>: the
popover API and anchor positioning. Now, with both of those APIs
landed in standards and browsers, the customizable-<select> is
unblocked.
Once the customizable-<select> feature began to get discussed in
standards (at OpenUI in 2020
<https://github.com/openui/open-ui/issues?q=is%3Aissue%20label%3Aselect%20sort%3Acreated-asc>,
and in WHATWG <https://github.com/whatwg/html/issues/9799>and
CSSWG in mid-2023), it rapidly evolved. Not only did the names of
the elements change (<selectmenu>, <selectlist>, then <select>,
etc.) but the shape of the API changed considerably. It evolved
from a very shadow-DOM centric API using things like the slot
attribute to a more HTML-like API using new elements such as the
<selectedcontent> element. The WHATWG/CSSWG/OpenUI joint task
force worked through the question of how to opt-in to the new
behavior, selecting among a new element, an HTML attribute, a CSS
property, or something else, and arrived at a consensus of using
the CSS appearanceproperty. Many discussions were had (e.g. in
OpenUI <https://github.com/openui/open-ui/issues/540>and WHATWG
<https://github.com/whatwg/html/issues/10317>) about the content
model and the allowed set of controls, to ensure the new control
is accessible and rational, while still providing a very
flexible, powerful API to developers. Overall, the standards
process shaped this API into something that follows platform
conventions, has natural naming and methods to achieve goals, and
builds naturally upon recently added features such as popover,
anchor positioning, interactivity:inert, and many others. In
addition, the construction of the customizable-<select> API has
been a huge catalyst to find other missing platform features and
quirks, such as corner cases
<https://github.com/whatwg/html/pull/10770>in the popover API.
Throughout this process, we’ve worked hard to reach out to the
developer community, to ensure all common use cases are
supported, there aren’t lingering compat issues, and the new
customizable-<select> control is as accessible as possible. In
some cases, e.g. the necessary changes to the HTML parser to
allow arbitrary content, there is still some compat risk. We are
working hard to increase our confidence that we can ship those
changes via (separate
<https://chromestatus.com/feature/5145948356083712>) Finch
testing and rollout. However, at this point, we are confident
that we have reached a stable API shape with a low level of risk.
Blink component
Blink>Forms>Select
Search tags
select <https://chromestatus.com/features#tags:select>, custom
select <https://chromestatus.com/features#tags:custom%20select>,
controls <https://chromestatus.com/features#tags:controls>, form
controls
<https://chromestatus.com/features#tags:form%20controls>, custom
controls
<https://chromestatus.com/features#tags:custom%20controls>,
custom form controls
<https://chromestatus.com/features#tags:custom%20form%20controls>
TAG review
https://github.com/w3ctag/design-reviews/issues/1007
<https://github.com/w3ctag/design-reviews/issues/1007>
TAG review status
Issues resolved
Risks
Interoperability and Compatibility
Interop risk is low because we have been designing this feature
closely with Apple and Mozilla during the standardization process
over the last 15 months.
Changing the HTML parser for <select> elements is a prerequisite
for this change and has some compat risks, which had a separate
intent here:
https://groups.google.com/a/chromium.org/g/blink-dev/c/5_9-Qkvlj2M/m/Q96A126vAAAJ
<https://groups.google.com/a/chromium.org/g/blink-dev/c/5_9-Qkvlj2M/m/Q96A126vAAAJ>
Gecko: No signal
https://github.com/mozilla/standards-positions/issues/1060
<https://github.com/mozilla/standards-positions/issues/1060>
WebKit: No signal
https://github.com/WebKit/standards-positions/issues/386
<https://github.com/WebKit/standards-positions/issues/386>
Web developers: Very strongly positive
https://2024.stateofhtml.com/en-US/features/#reading_list
<https://2024.stateofhtml.com/en-US/features/#reading_list>
Other signals:
Ergonomics
None in particular.
Activation
Clear documentation will be required to help developers
understand the opt in and how to style and replace various parts
of the new select element. We already have some documentation
here but will create another blog post for launching the feature:
*
https://developer.chrome.com/blog/rfc-customizable-select
<https://developer.chrome.com/blog/rfc-customizable-select>
*
https://una.im/select-updates/ <https://una.im/select-updates/>
Security
The picker for customizable select does not extend outside of the
web contents like an appearance:auto select does, so there should
not be any new capabilities exposed which would have security
considerations.
WebView application risks
Does this intent deprecate or change behavior of existing APIs,
such that it has potentially high risk for Android WebView-based
applications?
None
Debuggability
The customizable select should already be fairly debuggable via
existing DevTools features. The new select does add a few new
pseudo-elements, which have been added to DevTools.
Will this feature be supported on all six Blink platforms
(Windows, Mac, Linux, ChromeOS, Android, and Android
WebView)?
Yes
Is this feature fully tested by web-platform-tests
<https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?
Yes
https://wpt.fyi/results/html/semantics/forms/the-select-element/customizable-select
<https://wpt.fyi/results/html/semantics/forms/the-select-element/customizable-select>
