Yesterday, we learned about the different ways to instantiate a Web Component. In the article, I mentioned the connectedCallback() lifecycle method.
Today, we'll talk about more of those methods. Let's dig in!
The lifecycle methods
As the browser parses and renders your web component into the DOM, there are a few lifecycle callback functions that run at various times.
- The
constructor() method is run when the element is created, before its injected into the UI. - The
connectedCallback() method is run when the element is injected into the DOM, and again whenever it's moved or appended elsewhere. - The
disconnectedCallback() method is run whenever the element is removed from the DOM. - The
attributeChangedCallback() method is run whenever a registered attribute changes on the custom element.
We can include functions that run on each of these events inside our web component class.
The connectedCallback() and disconnectedCallback() methods
The connectedCallback() method runs when the element is injected or loaded into the DOM, and again whenever it's moved or appended elsewhere.
The disconnectedCallback() method is run whenever the element is removed from the DOM.
/** * Run methods when the element connects to the DOm */ connectedCallback () { console.log('connected 🎉', this); } /** * Run methods when the element disconnects from the DOm */ disconnectedCallback () { console.log('disconnected 😢', this); }
If you include a web component in the UI and do nothing else on the page, the constructor() method will run, followed by the connectedCallback().
If you were to move your element using something like the Element.append() method, the disconnectedCallback() function would run, followed by the connectedCallback() function.
If you removed it with the Element.remove() method, just the disconnectedCallback() function would run.
let count = document.querySelector('wc-count'); // The console logs... // "disconnected 😢" <wc-count></wc-count> // "connected 🎉" <wc-count></wc-count> document.body.append(count); // The console logs... // "disconnected 😢" <wc-count></wc-count> count.remove();
Here's a demo.
When would you use these methods?
As we learned yesterday, the connectedCallback() method can be useful when a component might be instantiated a few different ways.
They're also useful if you modify elements outside of your custom element when the Web Component loads.
/** * Run methods when the element connects to the DOm */ connectedCallback () { document.body.addEventListener('click', this); } /** * Run methods when the element disconnects from the DOm */ disconnectedCallback () { document.body.removeEventListener('click', this); }
Historically, a lot of articles advised that you do all of your startup tasks inside connectedCallback() and remove things like event listener in the disconnectedCallback() method.
But for listeners contained inside the Web Component and it's child elements, that stuff all gets garbage collected anyways after the element is removed, so it's not necessary.
What about attributes?
Tomorrow, we'll look at the attributeChangedCallback() method: what it is, how it works, and how to use it.
Like this? You can support my work by purchasing an annual membership.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] Web Component lifecycle methods"