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.

[scottaohara]

it's not officially in the HTML spec. but it's close.

safari and firefox are still a ways off from providing support.

[kass-kass]

Confusingly, MDN implies that rich HTML content is standard. The "styling with CSS" section of the main documentation for <select> starts out by stating:

The <select> element has historically been notoriously difficult to style productively with CSS, hence features being introduced to enable creating fully customizable select elements.

That link goes to a guide page, which in no way states that the listed approaches are cutting-edge and not widely supported, that recommends using i.e. a first-child <button>, as well as other features that aren't standardized apparently.

The MDN documentation only after that link goes on to a subsection titled "Legacy select styling", implying the approach listed there is not modern HTML/CSS and should be reserved for cases where some archaic browsers need to be supported, where actual standardized styling is described.

Therefore a lot of people will run into issues with Svelte, when trying to create and style a dropdown following the most obvious documented approach on the most widely-used resource for such information, as doing what's recommended directly throws a compiler error.

Because of that, and seeing as how the linked WHATWG proposal is likely already widely in-use, I assume making compilation possible (with a warning instead of an error, for example) for this case specifically, might be beneficial to a lot of users.