SetInterval keeps running in webcomponent when element is not present in dom anymore

Question

At the moment, I am working on a simple application that orchestrates multiple webcomponents. One of these components holds a setInterval function. The function keeps running, even when the component itself is not present in the dom anymore. Can one explain to me why this is the case?

Here is a simple reproduction:

const selectorEl = document.getElementsByTagName('body')[0];
selectorEl.innerHTML = '<my-component></my-component>'; // Append custom component to body

class WebComponent extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = '<span>This should not be visible since I am removed instantly!</span>';
        setInterval(() => console.log('I am still running...'), 2000);
    }
}

window.customElements.define('my-component', WebComponent);
selectorEl.innerHTML = ''; // Remove element from the dom directly

Answer 1

You need to use lifecycle callbacks to correctly use setInterval and clearInterval.

Example below:

const selectorEl = document.getElementsByTagName("body")[0];
selectorEl.innerHTML = "<my-component></my-component>"; // Append custom component to body

class WebComponent extends HTMLElement {

  connectedCallback() {
    this.innerHTML =
      "<span>This should not be visible since I am removed instantly!</span>";
  
    this.interval = setInterval(
      () => console.log("I am still running...", Math.random()),
      2000
    );
  }

  disconnectedCallback() {
    clearInterval(this.interval);
  }
}

window.customElements.define("my-component", WebComponent);
setTimeout(() => selectorEl.innerHTML = "",7000); // Remove element from the dom directly