connectedCallback() – Lifecycle Hooks

Lifecycle Flow
This diagram shows the flow of the component lifecycle from creation through render.

Run Code When a Component Is Inserted or Removed from the DOM

The connectedCallback() lifecycle hook fires when a component is inserted into the DOM. The disconnectedCallback() lifecycle hook fies when a component is removed from the DOM.

Both hooks flow from parent to child. You can’t access child elements from the callbacks because they don’t exist yet. To access the host element, use this.template.

The connectedCallback() hook can fire more than once. For example, if you remove an element and then insert it into another position, such as when you reorder a list, the hook fires several times. If you want code to run one time, write code to prevent it from running twice.