disconnectedCallback() Lifecycle & Teardown

Technical Deep Dive & Specifications

Execution Rules of disconnectedCallback()

The disconnectedCallback() lifecycle method is called synchronously by the browser whenever the element is detached from a document-connected DOM tree:

• element.remove()
• parent.removeChild(element)
• parent.innerHTML = '' (clearing a container)
• SPA routing views replacing DOM subtrees

Detached != Destroyed

Removing an element from the DOM does not destroy its JavaScript object. If the global window, document, a timer, or an external pub/sub event bus retains a reference to the element or any of its methods, the element and its entire detached DOM subtree will remain in memory indefinitely (known as a Detached DOM Tree Leak).

Teardown Checklist Matrix

The Modern AbortController Cleanup Pattern

In the past, developers had to store references to every individual listener function and manually call removeEventListener() for each one.

Modern web standards introduce AbortController, which allows you to tear down all listeners and network calls instantly using an AbortSignal:

class ResizableWidget extends HTMLElement {
  connectedCallback() {
    // 1. Create a fresh controller on connect
    this._abortController = new AbortController();
    const { signal } = this._abortController;

    // 2. Attach global listeners bound to the signal
    window.addEventListener('resize', () => this.handleResize(), { signal });
    window.addEventListener('keydown', (e) => this.handleKey(e), { signal });
    document.addEventListener('visibilitychange', () => this.handleVis(), { signal });

    // 3. Bind network fetch to the same signal
    fetch('/api/live-metrics', { signal })
      .then(res => res.json())
      .then(data => this.renderData(data))
      .catch(err => {
        if (err.name === 'AbortError') return; // Clean exit on unmount
        console.error(err);
      });
  }

  disconnectedCallback() {
    // 4. One single abort() call removes all listeners and cancels fetch!
    this._abortController.abort();
    this._abortController = null;
  }
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 73–84: In connectedCallback(), the component sets up its UI, creates an AbortController, and binds a window.addEventListener('resize', ...) using { signal }.
• Lines 86–94: It registers a 1.5-second setInterval to simulate live WebSocket/HTTP polling.
• Lines 97–110: In disconnectedCallback(), it calls this._abortController.abort(), instantly releasing the window resize listener, and invokes clearInterval() to prevent orphaned timers from running in the background.

Expected Browser Render Output

• While mounted, resizing the browser window logs resize events, and the price updates every 1.5s.
• Clicking "Unmount Component" removes the element from the DOM and logs teardown confirmations.
• Resizing the browser window after unmounting outputs no further logs, confirming zero retained listeners and zero memory leaks.