Component Lifecycle #

Lifecycle Hooks #

connectedCallback() #

The connectedCallback() is invoked when the custom element is first connected to the DOM. ElementalComponent registers all event listeners in this callback by default. To ensure proper cleanup, it is important to register event listeners here and unregister them in the disconnectedCallback(). Once the component is connected, the render() method will be executed, which provides a centralized location for organizing all DOM rendering.

class MyComponent extends ElementalComponent {
  protected connectedCallback() {
    super.connectedCallback();
  }
}

class MyComponent extends ElementalComponent {
  protected connectedCallback() {
    super.connectedCallback();
  }
}

disconnectedCallback() #

The disconnectedCallback() is invoked when the custom element is disconnected from the DOM. ElementalComponent automatically unregisters all event listeners in this callback by default. To ensure proper management of event listeners, it is important to register them in the connectedCallback and unregister them in this method.

class MyComponent extends ElementalComponent {
  protected disconnectedCallback() {
    super.disconnectedCallback();
  }
}

class MyComponent extends ElementalComponent {
  protected disconnectedCallback() {
    super.disconnectedCallback();
  }
}

adoptedCallback() #

Invoked when the custom element is moved to a new document.

class MyComponent extends ElementalComponent {
  protected adoptedCallback() {
    super.adoptedCallback();
  }
}

class MyComponent extends ElementalComponent {
  protected adoptedCallback() {
    super.adoptedCallback();
  }
}

attributeChangedCallback() #

The attributeChangedCallback() is invoked when an attribute of the custom element is added, removed, or modified. ElementalComponent manages a comprehensive set of functions during this lifecycle hook, including triggering a re-rendering of the component's DOM tree.

class MyComponent extends ElementalComponent {
  protected attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) {
    super.attributeChangedCallback(name, oldVal, newVal);
  }
}

class MyComponent extends ElementalComponent {
  protected attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) {
    super.attributeChangedCallback(name, oldVal, newVal);
  }
}