A <select> can now include rich HTML content

[mattcroat]

Describe the bug

Before you could customize a <select>, if you put things like an image or SVG into the <option> element, the browser would ignore them, but Svelte throws an error:

With the release of Chrome 135, the <select> element can now be customized using CSS and supports rich HTML content. Browsers that implement appearance: base-select will eventually support this feature.

Reproduction

This custom select example is valid in Chrome 135 and later versions.

Logs

System Info

n/a

Severity

annoyance

[mattcroat]

The workaround is to put the rich HTML in a separate component or snippet:

{#snippet content()}
  <span>Svelte</span>
{/snippet}

<select>
  <option value="">🔥 Hot frameworks</option>
  <hr />
  <option value="angular">Angular</option>
  <option value="react">React</option>
  <option value="solid">Solid</option>
  <option value="svelte">
    {@render content()}
  </option>
  <option value="vue">Vue</option>
</select>

<style>
  select {
    &, &::picker(select) {
      appearance: base-select;    
    }
  }
</style>

[Ocean-OS]

Will this only be allowed in Chrome, or is it a standardized feature? They seem to have it available as an experiment for now.

[whalderman]

@Ocean-OS The standards are public.