Types of life cycle callback methods

There are four life cycle callbacks available to Web Components as of now. These are as follows:

• connectedCallback()
• disconnectedCallback()
• adoptedCallback()
• attributeChangedCallback()

Let's discuss them in detail. 

connectedCallback()

This interface/callback gets invoked every time a copy of a Web Component gets added to the DOM. This is very useful when it comes to initializing events associated with the DOM inside the component, or state management (see Chapter 5, Managing States and Props), or anything that needs any sort of initialization or pre-checks.

Let's take a look at an example. In Chapter 1, Web Components Essentials and Specifications, we talked about a ...