Why does svelte handle "value" differently from other attributes?

698 views Asked by At

In svelte (3.42.5) attributes named "value" are translated differently from other attributes.

I.e. the component

<progress value="50" max="100"/>

translates to

...
function create_fragment(ctx) {
    ...
    return {
        c() {
            progress = element("progress");
            progress.value = "50";
            attr(progress, "max", "100");
        },
        ...

As one can see the attribute "value" is set in another way than "max". Although this is perfectly correct javascript code in browser it makes svelte-native struggle.

Furthermore I ask myself why svelte has this special handling?!? And is there a way to turn it off?

1

There are 1 answers

0
aa.hari.csbe On BEST ANSWER

As far as I know, value is a reserved keyword to set the value of this tag/component.

For example: when you are using select & option tags, the value of the option is set with the value key word.

<select bind:value={selected}>
    <option value={a}>a</option>
    <option value={b}>b</option>
    <option value={c}>c</option>
</select>

So I would say no, you can not deactivate this behavior.

Reference: https://svelte.dev/docs#Binding_select_value