Custom Elements lifecycle

Summary

connectedCallback, disconnectedCallback, attributeChangedCallback, adoptedCallback — mirror mount/unmount/props. Upgrade undefined → defined when script loads. Sync vs async definition affects parser. Framework wrappers must forward lifecycle correctly.

Code example

class UserCard extends HTMLElement {
  static get observedAttributes() { return ['user-id']; }

  connectedCallback() { this.render(); }
  disconnectedCallback() { this.cleanup?.(); }
  attributeChangedCallback() { this.render(); }
}

Key points

• connectedCallback, disconnectedCallback, attributeChangedCallback, adoptedCallback — mirror mount/unmount/props.
• Upgrade undefined → defined when script loads.
• Sync vs async definition affects parser.
• Framework wrappers must forward lifecycle correctly.

Further reading

• Using custom elements
• HTMLElement lifecycle

Related concepts

• Shadow DOM
• Web Components interoperability