MDN does a fairly good job of covering the for web components but one in particular got my attention today, . As kind of the inverse of , it will be fired when an instance of your custom element is removed from the DOM. While I didn't doubt this worked as advertised, I wanted to build a quick demo myself so I could see it in action. Let's start off with a component that demonstrates why this event is needed. lifecycle events disconnectedcallback connectedCallback Initial Web Component The first draft of our component is . This component does two things, outputs a simple bit of HTML and then uses an interval to execute code every two seconds. In this trivial example, it's just going to log a message to the DOM, but in a real-world component, you could imagine a component hitting a remote API to get updated information. foo-cat Here's the component: class FooCat extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		let name = 'Nameless';
		if(this.hasAttribute('name')) name = this.getAttribute('name');
		this.innerHTML = `<p>"Meow, meow.", said ${name} the cat.</p>`;
		setInterval(() => {
			let p = document.createElement('p');
			p.innerText = 'Meow!';
			document.body.append(p);
		}, 2000);
	}

}

customElements.define('foo-cat', FooCat); Now I'll use it in my HTML: <foo-cat></foo-cat>
<button onclick="killTheCat()">Kill the Cat</button> I've added a button as well and used an inline event handler (yes, this is not best practice, but I'm trying to keep things simple, please don't report me to the JavaScript Elders, I'd rather they keep fighting about React, SPAs, and, well everything else). The function just removes the element using a document selector (technically this will only remove the first one in the DOM, but again, going for simplicity): killtheCat function killTheCat() {
	console.log('kill the cat');
	document.querySelector('foo-cat').remove();
} Alright, nice and simple, right? Here it is running in a CodePen: https://codepen.io/cfjedimaster/pen/yLRRVzp?embedable=true If you click the button, you'll notice the component goes away, but the messages keep getting printed to the page. If you want, you can open the CodePen link, go to devtools, and confirm the custom element is gone. Fixed Component I was going to label this section, "properly killing the cat", but thought that was a bit much. So as you can expect, having an event handler to recognize when the component leaves the DOM is exactly what we need to fix this issue. I made two changes. First, I kept a handle to my interval like so: this.heartbeat = setInterval(() => {
	let p = document.createElement('p');
	p.innerText = 'Meow!';
	document.body.append(p);
}, 2000); And then simply added the event handler: disconnectedCallback() {
	console.log('i was killed, sad face');
	clearInterval(this.heartbeat);
} So again, while my component here is pretty trivial, you can see how important this would be in a real-world web component. You can test this out yourself below. https://codepen.io/cfjedimaster/pen/gOBBLKM?embedable=true Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

My Blog

Buy Me a Coffee

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

A Guide to Handling Web Component Removal With DisconnectedCallback

Too Long; Didn't Read

Raymond Camden

STORY’S CREDIBILITY

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

A Guide to Handling Web Component Removal With DisconnectedCallback

Too Long; Didn't Read

Raymond Camden

STORY’S CREDIBILITY

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES