"Select Bindings" example: why does line 36 work in a .svelte but not in a plain vanilla .js?

[metaleap]

Look at the <option value={question}> in this snippet from the example:

{#each questions as question}
	<option value={question}>
		{question.text}
	</option>
{/each}

MDN reminds us that HTMLOptionElement.value is:

A string that reflects the value of the value HTML attribute, if it exists; otherwise reflects value of the Node.textContent property.

So try to manually code out the above markup in plain vanilla JS, say like so, readily pasteable into dev-tools:

let val = { id: 1, text: "foo" };
let el = document.createElement('option'); 
el.value = val;
console.log(el.value, typeof el.value, el.value.text);

Most recent Chromium version, you'll see the console print [object Object] string undefined!

But clearly in Svelte it works, as the linked example showcases. Is Svelte's compilation logic special-casing <select> / <option> markup specifically and stealthily, auto-(un)JSONing value writes and reads, just for these known tags because their value happens to be string-typed, or what's going on?

Thanks for any insights that might demystify this =)

[brunnerh]

There is special logic because the value as noted can only be a string.

Svelte stores the value in a separate property __value on the DOM instance.
The generated code in v4 looks like this:

option = element("option");
option.__value = option_value_value = /*question*/ ctx[1];
set_input_value(option, option.__value);

(This is also used for things like radio buttons and checkbox groups.)

[metaleap]

Oh I see! Good to know. Much obliged & many thanks @brunnerh !