If you've been following along with my series on Web Components, you've likely noticed that I tend to add my event listeners in the connectedCallback() method, and remove them in the disconnectedCallback() method.
customElements.define('count-up', class extends HTMLElement { // Instantiate the component constructor () { super(); this.count = 0; } // Create the click handler handleEvent (event) { this.count++; } // Start listening connectedCallback () { this.addEventListener('click', this); } // Stop listening disconnectedCallback () { this.removeEventListener('click', this); } }); But in the article "You're (probably) using connectedCallback wrong," Hawk Ticehurst argues that event listener instantiations should probably just got in the constructor().
The thinking is that you generally only need or want to add them once, and if the element gets removed from the DOM, the browser will garbage collect the event listeners anyways.
Where I think this gets tricky is if you want to attach listeners to elements inside your Web Component, and when you don't generate them until later in the process.
But I also think that's an exception rather than a rule.
🔥 Cyber Monday Sale (extended)! This week only, save 50% on Lean Web Club membership, private coaching, and all of my courses and workshops.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] You're (probably) using connectedCallback() wrong in your Web Component"