The new `base-select` it's dope...however it is a bit problematic for svelte (and probably Solid too) because it changes the HTML parser behaviour that svelte uses to get a reference to the elements you define. So if you write <option><div></div></option> svelte will throw a compiler error. 1/2 - ThreadSky

paolo.ricciuti.me • 83 days ago

The new `base-select` it's dope...however it is a bit problematic for svelte (and probably Solid too) because it changes the HTML parser behaviour that svelte uses to get a reference to the elements you define. So if you write

svelte will throw a compiler error. 1/2

Comments

fred-crozatier.dev•83 days ago

What's the problem with the parser, is it expecting a too restrictive content model for the

paolo.ricciuti.me•83 days ago

The issue is: if you add a variable in the `span` svelte has to do `span.textContent=variable` and to get a reference to the span it has to do `option.firstChild` but this will return a text node in Firefox and a span in chrome

paolo.ricciuti.me•83 days ago

We already have some ideas to fix this but in the meantime if you want to use it today there's a small escape hatch you can use that also makes your code more modular (in a win-semiwin situation 😄)...just wrap the rich html for the option in a snippet! Same goes if you want to use a custom button!

lukewarlow.dev•81 days ago

Besides the point but fwiw that aria-label on the button is probably not doing what you think. The button nested within the select is actually inert. You should markup the select with your aria and event listeners etc. the button is largely just a parser hack.

paolo.ricciuti.me•81 days ago

Oh yeah we need to update the compiler to now warn there, it was just to silence it 😁

lukewarlow.dev•81 days ago

Ah gotcha, makes sense!

paolo.ricciuti.me•81 days ago

*not warn