Lifecycle

constructor()

It creates and initializes an object instance of the class. In the web component lifecycle, the constructor is the first method of the lifecycle and is called once the web component is initialized.

connectedCallback()

It will be called once each time the web component is attached to the DOM.

attributeChangedCallback()

It will be called every time that attribute is updated. To observe the attributes, you hava to use static get observedAttributes() method. It is placed right at the top of the constructor and should return an array, containing the names of the attributes you want to observe:

1

static get observedAttributes() { return ['attribute1', 'attribute2']; }

adoptedCallback()

It is used to move a node from one document to another.

disconnectedCallback()

It will be called when the web component is removed from the DOM.