title: Custom element still running after removal
body: <p>I have a custom element inside  tag. At some point I replace the whole  with a different content/dom but based on the dev console the custom element from the previous 'body' is still running (i.e. fetching some data). Isn't it supposed to be garbage collected(i.e. JS exec stopped) when the DOM is removed/replaced?
    Do I need to handle the removal manually(i.e. stop in-flight fetch requests etc) using disconnectedCallback ?</p>
  
  <p>Code samples(reduced)</p>
  
  <pre><code>&lt;body&gt;
  &lt;x-search data-cursor="xyz"&gt;&lt;/x-search&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS
      // In the real code this is another custom element that replaces the body</p>
  
  <pre><code>function replacePage(newBody){
      // received an event (i.e. click on a navigation link) 
      // that requires body change
      //
      document.body = newBody.body
      // At this point I was expecting SearchElem to be garbage collected
      // (existing fetch requests aborted etc)
     // but I can see in the console that it's still running 
     // (i.e. fetching some items which perhaps started based
     // on an event received before the dom was removed).
  }
  class SearchElem extends HTMLElement {
      constructor() {
          super(); 
          this.SearchPull = {
              "top": 200,
              "down": 200,
          };
          // Listen for various events such 'focus'
          // on each event scan the DOM(#search-results) and fetch 
          // new results or remove from existing top/tail if necessary.
          this.ListenEvents()
          let wrapper = this.querySelector("#search-results");
          this.searchPolicy = new SearchPolicy(this.SearchPull, wrapper, cursorHistory);
      }
  }
  </code></pre>