0

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).

pac w
  • 647
  • 6
  • 17
  • Your have to program reactivity yourself, use the ``attributeChangedCallback`` and/or a ``name`` GETTER/SETTER – Danny '365CSI' Engelman Nov 01 '21 at 11:01
  • Assuming this is a content script, it runs in an isolated environment so if you want to expose your component to the page environment you will need to do it in a page script as [shown here](/a/9517879). – wOxxOm Nov 01 '21 at 11:10
  • @Danny'365CSI'Engelman. I am using the Svelte custom element API to build the component, do you know if I need to add the attributeChangedCallback (https://svelte.dev/docs#Custom_element_API)? – pac w Nov 01 '21 at 16:42
  • Sorry, no longer using svelte or any library. My vanilla JScode will run fine for another 25 years, in 27 web years i have yet to see a library that lasts that long – Danny '365CSI' Engelman Nov 01 '21 at 17:18

0 Answers0