im having a simple web component running on my page. By a button click i simply remove the element expecting that the element and the class behind it is getting killed. But actually it keeps running, for example event listeners are still running even after removing it from the DOM.

This is how i add it to the DOM and make it load:

import { LightningElement, createElement } from 'lwc';
import App from 'my/app';

export default class App extends LightningElement {
  ...
  const appinner = createElement('my-app', { is: App });
  document.body.appendChild(app);
  ...
}

Then i simply remove it by this:

const app = document.querySelector('my-app');
app.remove(); // or app.parentNode.removeChild(app);

Everything in my "App" class is still running even when its gone. How can i really make it unload (or deconstruct) or even kill so no logic keeps running.

Update: Missed to mention i am using LWC library from lwc.dev. And the proper way of injecting an element is described here: Link

Update2: Added more code to show how its really done using the LWC.dev library