2

I recently noticed that a setter in a web component is not being called when you inject the webcomponent javascript file with a script tag where the defer attribute is used. You can see the code here: https://codesandbox.io/s/web-component-with-setter-1ij4o

Within the script tag of the index.html, I set the property foobar to "test". This should trigger the setter of the webcomponent, which should print the value "test" to the screen by an alert command. But this does not happen. If you delete the defer attribute, everything works as expected. Can you tell me why this is happening, and do you have a solution where the setter is being called without deleting the defer attribute?

Kofi
  • 1,224
  • 1
  • 10
  • 21
Matthew Darton
  • 551
  • 1
  • 7
  • 27

1 Answers1

1

What's happening is that your inline script is running before the deferred script.

You can solve this by either putting your inline script in a file and loading it with the defer attribute OR by putting the inline code inside an event listener to run after the 'DOMContentLoaded' event.

document.addEventListener('DOMContentLoaded', () => {
  const wc = document.querySelector("custom-text");
  wc.foobar = "test";
});
Windom Earle
  • 648
  • 3
  • 7
  • 21
  • 1
    This works for OPs question; but you might want to wait even longer for the ``load`` Event, with ``DOMContentLoaded`` assets might still be loading: https://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events – Danny '365CSI' Engelman Jan 17 '22 at 10:00