Two-Way Binding With Native Components Not In Sync With Attribute

[munawarb]

I'm writing a native web component using Svelte which is a wrapper around an edit field:

<script>
export let value = "Default Value";
</script>
<main>
<input type="text" bind:value={value} />
</main>

I can set the value, which properly updates the textbox.

I then type stuff into the textbox, which updates value, which I can verify by using document.getElementById("my-component").value.

However, when I get the value of my component using document.getElementById("my-component").getAttribute("value"), it returns the last value that I set using setAttribute("value", "Some other value").

It doesn't return the actual value property on the component that got updated when I typed stuff into the textbox.

How can I keep the attribute and property in sync, or is there not a way to do this?

This is when I compile my component as a native web component.

[richnew10]

I see this more generally: any change to a prop of a web component (e.g., adding value = 'foo'; at the bottom of your script) does not propagate to the component, either as a property or an attribute.

Did you make any progress on this, @munawarb?

[munawarb]

Hi @richnew10, No, I haven't looked further into this. We ended up just using the property names instead of attributes since it's consistent and we don't get the out-of-sync problem.

[geoffrich]

Svelte won't reflect property changes to the corresponding attribute automatically. You have to do that yourself, which is a little tricky since there isn't a defined way to get the current custom element instance (see #3091). You can work around it using the get_current_component internal API, but this could change behavior without warning because it's not intended for external use.

Here's an example of updating the element's name attribute when the property changes. Clicking the button will set the <my-el> name property to true as well as the attribute.

<script>
	export let name;

	import { get_current_component } from 'svelte/internal';

	$: get_current_component().setAttribute('name', name);
</script>

<svelte:options tag="my-el"></svelte:options>

<p>Hello {name}</p>
<button on:click={() => name = 'test'}>Update name</button>

This would be a nice feature to have built in for those authoring custom elements in Svelte. Other frameworks like Lit make it easy.

I see this more generally: any change to a prop of a web component (e.g., adding value = 'foo'; at the bottom of your script) does not propagate to the component, either as a property or an attribute.

@richnew10 I do see the property being updated on the custom element in my example, i.e. document.querySelector('my-el').name returns test after clicking the button. Are you seeing something different?

[richnew10]

Are you seeing something different?

I was, but I think it was an order of execution thing: Svelte seems to bind props after the contents of a component's <script> tag runs, and so my testing approach was flawed. I can reproduce the expected behavior that you described, thanks.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dummdidumm]

Closed via #8457 via the new reflect capability, to be released in Svelte 4