CODEWITHSUNDEEP
sveltecustom-element
pac w
pac w

Reputation: 657

Svelte custom element updating not working

I have created a custom element using svelte:

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

<script>
  export let name;
</script>

<div>Hello {name}</div>

Which works when I initialise it in HTML:

<my-component name="Jane"></my-component>

The output on screen is "Hello Jane".

When I try to update name from the console it does not work:

var mc = document.querySelector('my-component');
mc.setAttribute('name', 'John');

The output is still "Hello Jane".

Why does it not work?

Upvotes: 1

Views: 668

Answers (1)

mijorus
mijorus

Reputation: 161

The variable that you are passing are static not reactive. Svelte will parse the variable on page load and that's it.

Don't get confused by the fact that in the code you use them as a component prop.

I would suggest you to set these variables in sessionStorage and use the onchange event in Svelte to run your custom logic

Upvotes: -1

Related Questions