I've created a custom element that I want to use in a chrome extension.

When I initialise the component like so, it works fine:

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

The output on screen is "Hello Jane".

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

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

The output is still "Hello Jane".

I tried this in a plain HTML file and it worked as intended, the output changed to "Hello John".

I built the component using Svelte (https://svelte.dev/docs#Custom_element_API).