"Legend" element inside "optgroup" Svelte5+Svelte Language Server

[flexlex]

Describe the bug

I get a Runtime error when inseritng an <legend> tag inside <optgroup> inside of an <select> element.
As far as i've read on MDN, this is valid HTML.
Doing: {@html "<legend>Mamma Mia</legend>"} the browser doesn't "repair" the legend element.

Reproduction

https://svelte.dev/playground/hello-world?version=5.33.19#H4sIAAAAAAAACm2NzU7DMBCEX8XaS0GKsLgaE4lbOfAEDQcTTytL67UVb1tQ1XdHCeHnwHG-_XbmQhIyyNEWzMWcy8TR3CAmRbyljvaJ0cjtLqQfdfZmQN3311Otd-0E1pm9hYb_-FhEIdrIkW_jlKr2gwzKUDPr5tFslt3NwyDe_hriGxjjl-1L1cNUjnVJg3rGARL7l5BzMDkFb1ey3kvVVKR_VmRz7-0alyr7p8vbnxHqSPGu5HQ64vrakYbE5ySR3D5ww_UTjIdxoy0BAAA=

Logs

System Info

Any

Severity

annoyance

[elliott-with-the-longest-name-on-github]

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend

This is likely a holdover from pre-customizable-select-elements where it wouldn't have been valid, but it appears to be allowable now.

[paoloricciuti]

Does it work even outside chrome?

[elliott-with-the-longest-name-on-github]

Hmm good catch, I assumed because MDN documented it and didn't say anything about it being experimental that other browsers had at least implemented parsing for it, but it appears this isn't correct -- Safari will delete the legend element leaving only the text inside of it.

I wonder if we should downgrade this to a warning in this specific case? Otherwise it's just straight up impossible to experiment with customizable select in Svelte.

[Conduitry]

Should this get folded into #15617? Is there something separate for this issue to consider doing here?

[paoloricciuti]

Yeah it's a duplicate of #15617 and it's also not a good first issue as it will break hydration if we don't error out for the browsers that remove it.

[paoloricciuti]

What we will likely have to do is build both hydration marching (considering all the elements removed from option and all the element left in) and have a runtime switch between the two