Cannot bind value of native <progress> element

[fcrozatier]

Describe the bug

If I try to bind the value attribute of a progress element I get an error

'value' is not a valid binding on <progress> elements svelte(invalid-binding)

It seems legitimate to be able to bind the progress value doesn't it ?
I can work around it but this would be nice.

Reproduction

<script>
    let value;
</script>

<progress bind:value/>

Logs

No response

System Info

System:
    OS: macOS 11.6.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 448.23 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.5.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.12.1 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 103.1.40.113
    Chrome: 103.0.5060.114
    Firefox Developer Edition: 103.0
    Safari: 15.5
  npmPackages:
    svelte: ^3.49.0 => 3.49.0

Severity

annoyance

[stephane-vanraes]

afaik progress elements cannot be changed through user interaction, which would mean the binding would have to trigger when the value changed due to an outside effect, this does not work for regular inputs either:

<script>
  let value = 50	
  function handle() {
    document.querySelector('input').value = 100
  }
</script>

<button on:click={handle}>Set to 100</button>
<input bind:value>

{value}

(clicking the button would change the value in the field to 100, but not value the variable)

[fcrozatier]

Ok it may be a more general question then, and seems related to the way bindings are not synced with attributes as mentionned in #5705

Is it something we would want (synced attributes) ?

[Prinzhorn]

I just want to make sure, this is not what you want / not enough?

<script>
    let value;
</script>

<progress {value} />

https://svelte.dev/repl/32337cbfeb4f4b97949fdf950612f7c8?version=3.49.0
https://svelte.dev/repl/c986979b70f4416fa7ff81c4e9dd4c32?version=3.49.0

It seems legitimate to be able to bind the progress value doesn't it ?

No? I don't think I understand what you are trying to do. Why would a different component or part of your code change the value of this DOM element and you need to react to that?

[fcrozatier]

I guess at this point in the discussion the conclusion is that it doesn't make sense to bind the progress value.
This element is not meant to be interacted with.

You can set its value attribute with a variable if needed like @Prinzhorn said, but changing the attribute directly will not modify the variable, as with @stephane-vanraes example:

<script>
  let value = 50	
  function handle() {
    document.querySelector('input').value = 100
  }
</script>

<button on:click={handle}>Set to 100</button>
<input bind:value>

{value}

(clicking the button would change the value in the field to 100, but not value the variable)

These out of sync attributes can be a bit confusing but maybe this is a different, more general issue ?
Feeling like closing this issue