Everyday utility types

API

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  this.addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Credits

• ts-toolbelt by Pierre-Antoine Mills – TypeScript's largest utility library

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas