Getting Started with Web Components

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 <student-attendance-table> component, where the Web Component makes a fetch call to the file student.json, in order to retrieve the attendance data and then display that data in the form of a table.

The correct way to write that Web Component would be to add a connectedCallback() method ...