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

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