Web Component lifecycle methods

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.