The Lifecycle of a Web Component


placeholder

This is a premium lesson.

Subscribe to get access to the entire course.

Sign up now

You’ll remember in the copyright example that we used the connectedCallback function. connectedCallback is just one of several methods that we can use to hook into stages of the web component’s lifecycle. Whether it’s when the component renders, updates, or gets destroyed. We’ll take some time this lesson to go through the most common ones and understand when to use them and why.

While we’ll be stepping through the most common lifecycle methods, here’s an overview of the entire lifecycle of a web component.

The lifecycle of a web component

Rendering a component

The first of the component lifecycle methods to get called is the constructor.

constructor()

The constructor is invoked when both of the followi