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.

How to Add Form Participation Support to Web Components

Getting Started with the Adobe Photoshop APIs

My Blog

Buy Me a Coffee

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

A Guide to Handling Web Component Removal With DisconnectedCallback

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Cat-Centric Guide to Using Web Components in Alpine.js

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

A Cat-Centric Guide to Using Web Components in Alpine.js

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps