This content originally appeared on Go Make Things and was authored by Go Make Things
I’ve been making a lot of YouTube videos about Web Components lately.
I generally like to do my instantiations in the constructor(). If you put stuff in the connectedCallback(), you can end up reinstantiating things over-and-over whenever an element is moved around the DOM.
customElements.define('my-library', class extends HTMLElement {
constructor () {
// Access parent properties
super();
// Find elements
this.btn = this.querySelector('button');
this.announce = this.querySelector('[role="status"]');
// Listen for events
this.btn.addEventListener('click', this);
}
// ...
});
One of the more common issues I hear from folks, though, is…
Doing stuff in the
constructor()throws an error when you load your JavaScript in the header.
To which I say… don’t load your JavaScript in the header!
Or if you do, add the [defer] attribute. Or wrap your code in a DOMContentLoaded event listener. Or both.
This is true for any DOM manipulation script, by the way.
The Web Component example above will error when loaded in the header because when it runs, the elements inside the custom element might not be loaded into the DOM yet. Loading in the footer, or waiting until the DOM is ready, gets around that.
🎉 Preorder Getting Sh!t Done today and get 40% off! Be more productive, get more done, and feel more in-control of your work and life. Click here to learn more.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-08-02T14:30:00+00:00) My Web Component doesn’t load when my JavaScript is in the header. Retrieved from https://www.scien.cx/2024/08/02/my-web-component-doesnt-load-when-my-javascript-is-in-the-header/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.