Custom element props not changeable after assigned value inside component

[satouriko]

Describe the bug

Once the prop is assigned inside the component, i.e.

<script lang='ts'>
  let {
    value = '',
  }: {
    value: string;
  } = $props();

  function oninput(e: Event) {
    const target = e.target as HTMLInputElement;
    value = target.value;
  };
</script>

<input
  {value}
  oninput={e => oninput(e)}
/>

The prop wouldn't be able to change outside the component anymore, for instance

const ele = document.querySelector('my-custom-element')
ele.value = 'hello world'
console.log(ele.value) // still previous value!!!

Reproduction

https://github.com/satouriko/svelte-custom-element-bug
Click the button, and the input will get filled "hello world"
After inputting something into the input with keyboard, click the button again, the input value wouldn't change to "hello world"

Logs

No response

System Info

Svelte 5
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'

Severity

blocking all usage of svelte

[Prinzhorn]

The title is not accurate, it is changeable but Svelte seems to think the value is the same and doesn't update.

This demonstrates that you can in fact update the prop:

<script lang='ts'>
  function setMyElementVal() {
-    ($host().querySelector('my-custom-element') as any).value = 'hello world'
+    ($host().querySelector('my-custom-element') as any).value = 'hello world' + Date.now()
  }
</script>

[satouriko]

Thanks @Prinzhorn. With this knowledge I can workaround when using the custom element by setting the value to undefined and then the value intended.
But I believe this is a bug, the behavior is incorrect. A foreign invoker doesn't always, and not necessarily aware of the web component's internal state. It sets $0.value = 'hello world' and it doesn't work, still a critical issue for me because I'm making a library.