Support for the New Customizable Select API

[Freddy500]

Goals

Enable developers to use the new Customizable Select API markup in Next.js apps without hydration or HTML validation errors.

Non-Goals

• Polyfilling or backporting the customizable select API for browsers that do not support it.
• Providing custom select UI components—this is about native platform support.
• Supporting non-standard or experimental HTML not covered by the evolving spec.

Background

It's still early days for this API but it seems Chrome has enabled support by default and it would great if we could start using it in a Next.js context. Especially as browsers who do not offer support yet fallback to an un-styled select.

Currently, when using this markup in Next.js (with Turbopack), the following errors are encountered:

• In HTML, <button> cannot be a child of <select>
• In HTML, <span> cannot be a child of <option>
• In HTML, <legend> cannot be a child of <optgroup>.
• In HTML, <style> cannot be a child of <option>
• In HTML, <style> cannot be a child of <optgroup>
• The tag <selectedcontent> is unrecognized in this browser -> In Firefox
• Hydration failed because the server rendered HTML didn't match the client.

This is when styling with nested <style> components (supported since React 19). In that case the custom select renders and works in the browser aside from these hydration errors.

When styling with css modules it doesn't render at all and you get css parsing errors along the lines of 'checkmark' is not recognized as a valid pseudo-element. This seems separate from the above and should be solved with a LightningCSS update (source)

Resources:

• Chrome Feature
• Una API Updates
• MDN

Proposal

Update Next.js’s HTML parser, SSR, and hydration logic to recognize and support the new customizable select API as browsers implement it.