Chapter 4. The component lifecycle
This chapter covers
- Using the connectedCallback Web Components API method to listen when your component is added to the DOM
- Knowing when and how to use the constructor method, especially because it occurs before the component has access to the DOM
- Utilizing the disconnectedCallback Web Components API method to clean up after your component
- The seldom-used adoptedCallback Web Components API method
Up to now, we’ve explored a couple different methods from the Web Components API, but we really didn’t talk about the API as a whole. These methods are the basic building blocks for building everything from custom components to entire applications. So, it’s a good idea to take a look at all of them in detail. In the last chapter, we looked at the attributeChangedCallback and the observedAttributes static getter. In this chapter, we’ll cover the rest in the same amount of detail.
Additionally, we need to consider that now that Web Components are shipping in browsers, the specification should be considered a permanent part of the web development workflow for years to come. With this in mind, we should have some confidence that Web Components can be used in a variety of situations.