There is no value attribute on the <input> tag in the DOM tree.

[artemkliaus]

Describe the bug

https://svelte.dev/playground/bddf99ab129444138c6bec09ccf1fe3e?version=5.38.2

We pass the value from the store into the child component, but in the DOM tree, as you can see, the tag does not have a value attribute.

Reproduction

Need to add a value attribute to a tag

Logs

System Info

Browsers

Severity

annoyance

[brunnerh]

Need to add a value attribute to a tag

Why?

[artemkliaus]

Need to add a value attribute to a tag

Why?

We have a large legacy project where some of the data is taken directly from attributes, and it’s not possible to rewrite everything.

[brunnerh]

That is not a sufficient reason to add non-standard logic to Svelte that potentially also breaks other people's code.

[artemkliaus]

That is not a sufficient reason to add non-standard logic to Svelte that potentially also breaks other people's code.

Why non-standard logic? This attribute is part of the HTML standards.

https://developer.mozilla.org/ru/docs/Web/HTML/Reference/Elements/input#value

[brunnerh]

Yes, but it not reflected unlike e.g. placeholder, where an update to the DOM property also affects the attribute.

Well, given that Svelte uses HTML markup to represent how properties are updated, it might look like the attribute is being set, so a different interpretation would also be valid. Ultimately JS is used to update the DOM property on change, hence no effect on the attribute. This is not specific to Svelte either, you would have to go out of your way to update the attribute, which generally would serve no purpose.

[artemkliaus]

Yes, but it not reflected unlike e.g. placeholder, where an update to the DOM property also affects the attribute.

Well, given that Svelte uses HTML markup to represent how properties are updated, it might look like the attribute is being set, so a different interpretation would also be valid. Ultimately JS is used to update the DOM property on change, hence no effect on the attribute. This is not specific to Svelte either, you would have to go out of your way to update the attribute, which generally would serve no purpose.

I don’t quite understand what you’re saying. In our case, it’s clearly a bug because the data doesn’t appear in the markup when it should. Moreover, if I explicitly write

input value="123"
the attribute appears, which clearly implies illogical behavior. Why is the attribute present when hardcoded, but not when it comes from a variable? It shouldn’t be like this.

[MotionlessTrain]

To explain what brunnerh was saying, the value attribute just specifies the initial value of the input. So if you would write <input value="123" id="my-input"> in a html file, the value is initially 123. When updated later programmatically (e.g. with document.getElementById('my-input').attributes.value = '234', the value of the input does not get changed
That is why svelte directly sets the value property of the input instead (document.getElementById('my-input').value = '234'), as that does what people expect (changing what is displayed inside of the input)

[artemkliaus]

To explain what brunnerh was saying, the value attribute just specifies the initial value of the input. So if you would write <input value="123" id="my-input"> in a html file, the value is initially 123. When updated later programmatically (e.g. with document.getElementById('my-input').attributes.value = '234', the value of the input does not get changed
That is why svelte directly sets the value property of the input instead (document.getElementById('my-input').value = '234'), as that does what people expect (changing what is displayed inside of the input)

Thanks for the answer. Okay, then looking at another point — why, when I pass the value through a variable, is it not added to the markup? In my opinion, there should be synchronization.

[artemkliaus]

Also, if we look at React for example, there the state synchronizes the data with the markup, which in my opinion is the correct approach.
I’ve attached a code example.
https://playcode.io/react

`import React from 'react';

export function App(props) {
const [ value, setValue ] = React.useState('initial');
return (

<input value={value} onChange={() => {setValue('up')}} />

);
}`

[7nik]

React is a bad example because it twists the Web API, especially related to inputs. Like onChange listens to the input event.

You can set attribute value via defaultValue.

[DmitriiNazimov]

<input type="text" defaultValue={value} bind:value placeholder="city"/> - it works fine. Everyone is satisfied, i think :)
Thanks for details answers!

[artemkliaus]

Thanks for the answers. I’ll close the issue. But in the end, I’d still like to point out that defaultValue is not a valid HTML attribute.
It’s a property, not an attribute. I thought there was an intention to keep synchronization between the framework’s markup and HTML. As far as I know, that’s why self-closing tags were removed. But now it turns out to be a bit confusing.