disconnectedCallback
A lifecycle hook called after the element is removed from the document.
disconnectedCallback()
The browser calls a custom element's disconnectedCallback
when the element is removed from the page. StacheElement uses this to clean up event handlers and call the disconnected
lifecycle hook.
The disconnectedCallback
can also be called manually to trigger these things:
import { StacheElement } from "can";
class MyElement extends StacheElement {
connected() {
this.listenTo("greeting", (greeting) => {
console.log(`greeting changed to ${greeting}`);
});
}
}
customElements.define("my-el", MyElement);
const myEl = new MyElement()
.connectedCallback();
myEl.greeting = "Hello"; // -> "greeting changed to Hello"
myEl.disconnectedCallback(); // -> "cleaned up"
myEl.greeting = "Hi"; // nothing logged
myEl.greeting = "Hello";
myEl.disconnectedCallback();
Returns
{Element}
:
The element
instance.
Purpose
StacheElement
implements the custom element disconnectedCallback
hook to:
- disconnect the element from the DOM.
The disconnect
method handles cleaning up any event handlers created for the element (including calling stopListening) and then calls the disconnected hook.
When creating an extended StacheElement
, the disconnectedCallback
should not be overwritten. Code that needs to run when an element is removed from the page should be put in disconnected.