v150 · html · customizable-select · forms

Clone into all descendant `selectedcontent` elements

Chrome 150 fixes two edge cases in the customizable <select> implementation: multiple <selectedcontent> elements within the same <select> are now all kept in sync with the selected option (not just the first), and updates are properly deferred when they would otherwise occur during DOM insertion or removal steps.

at a glance

Shipped in	Chrome 150 (Enabled by default)
Status	Enabled by default
API change	Behavioural fix — edge cases of the `<selectedcontent>` element
Spec	whatwg/html#12263
Standards position (Firefox)	No signal
Standards position (Safari)	No signal
ChromeStatus	5863985044914176 — Clone into all descendant selectedcontent elements

Source: chromestatus.com/feature/5863985044914176

background: customizable select and `<selectedcontent>`

The customizable <select> feature (shipping progressively in Chrome) lets authors style the select button and dropdown using standard CSS. The <selectedcontent> element is a special element that can be placed inside a <select> to display a clone of the currently selected <option>'s content in a custom button layout.

Source: whatwg/html#12263

what this fixes

Edge case	Before Chrome 150	Chrome 150+
Multiple `<selectedcontent>` elements in the same `<select>`	Only the first one in DOM order was updated when the selection changed	All `<selectedcontent>` elements are kept in sync
Update triggered during DOM insertion/removal steps	Could cause security issues or inconsistent state	Update is deferred via post-insertion steps or a microtask

This is a PSA rather than an intent to ship because both cases involve either invalid markup or very low usage patterns (customizable select overall is at ~0.02% usage).

Source: chromestatus feature summary

example

<!-- Chrome 150+ keeps both <selectedcontent> elements in sync -->
<select>
  <button>
    <selectedcontent></selectedcontent>  <!-- primary display -->
  </button>
  <button class="compact">
    <selectedcontent></selectedcontent>  <!-- secondary display, also updated -->
  </button>
  <option value="a"><img src="icon-a.svg"> Option A</option>
  <option value="b"><img src="icon-b.svg"> Option B</option>
</select>
<!--
  Before Chrome 150: only the first <selectedcontent> reflected the selection.
  After Chrome 150: both are cloned from the selected <option>.
-->