Astro Info

Astro                    v5.7.4
Node                     v20.19.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

Chrome

Describe the Bug

Astro does not correctly close option tags when they contain a tag inside of them. When it just contains text, option is closed correctly. However if you to place a span inside for example:

<select>
  <option value="lemon"><span>Lemon</span></option>
  <option value="lime"><span>Lime</span></option>
</select>

Astro produces

<select>
    <option value="lemon"><span>Lemon
    <option value="lime"><span>Lime
        </span></option></span></option>
</select>

So you end up with an option that wraps a span that wraps an option that wraps a span instead of the expected option wraps span, option wraps span.

Firefox parses what it thinks you probably meant and separates them into their own options. Chrome treats it as as a single option.

What's the expected result?

Astro should accurately reproduce the expected HTML. Traditionally rich HTML content would just be ignored by the browser so there was no need to include other tags, but as of Chrome 135 select can now be customized and can include rich HTML content enabling more interactive components without relying on JS. I have not tested whether Chrome 134 behaves like 135 or like Firefox.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ttndfuvp?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.