This article explores the often-overlooked lifecycle callbacks of web components, demonstrating how they enable context-aware elements. We'll build a web component that reacts to its environment, showcasing the power of these functions.
This article is part of a series on simplifying web component development:
Four key callbacks govern a web component's lifecycle:
connectedCallback
: Fired when the element is added to the DOM.disconnectedCallback
: Fired when the element is removed from the DOM.adoptedCallback
: Fired when the element is moved to a new document.attributeChangedCallback
: Fired when an observed attribute changes.Let's illustrate these with a practical example.
We'll create a <postapocalyptic-person></postapocalyptic-person>
component. Each person is either human or zombie, determined by the .human
or .zombie
class on its parent element. The component will display an appropriate image using a shadow DOM.
customElements.define( "postapocalyptic-person", class extends HTMLElement { constructor() { super(); this.shadowRoot = this.attachShadow({ mode: "open" }); } // ... lifecycle callbacks will be added here ... } );
Our initial HTML:
<div class="humans"> <postapocalyptic-person></postapocalyptic-person> </div> <div class="zombies"> <postapocalyptic-person></postapocalyptic-person> </div>
connectedCallback
connectedCallback
is called when <postapocalyptic-person></postapocalyptic-person>
is added to the page. We'll use it to add the image:
connectedCallback() { const image = document.createElement("img"); if (this.parentNode.classList.contains("humans")) { image.src = "https://assets.codepen.io/1804713/lady.png"; } else if (this.parentNode.classList.contains("zombies")) { image.src = "https://assets.codepen.io/1804713/ladyz.png"; } this.shadowRoot.appendChild(image); }
This ensures the correct image is displayed based on the parent's class. Note: connectedCallback
can fire multiple times; use this.isConnected
to check connection status.
connectedCallback
Let's add buttons to add/remove people and track counts:
<div> <button id="addbtn">Add Person</button> <button id="rmvbtn">Remove Person</button> <br>Humans: <span id="human-count">0</span> Zombies: <span id="zombie-count">0</span> </div>
Button event listeners:
// ... (add/remove person logic) ...
Updated connectedCallback
to update counts:
connectedCallback() { // ... (image logic) ... // Update counts based on image source }
disconnectedCallback
disconnectedCallback
decrements counts when a person is removed. We'll use the image source as a proxy for type:
disconnectedCallback() { const image = this.shadowRoot.querySelector('img'); // Decrement counts based on image source }
adoptedCallback
and attributeChangedCallback
We'll introduce the possibility of hidden clowns, moving them to an <iframe></iframe>
using adoptedCallback
and revealing them with attributeChangedCallback
. The details of this advanced example are omitted for brevity, but the core concept involves using adoptedCallback
to detect when a component is moved to a new document and attributeChangedCallback
to react to attribute changes, updating the image accordingly.
This illustrates how lifecycle callbacks provide powerful tools for creating dynamic and context-aware web components, making them more versatile and responsive.
The above is the detailed content of Context-Aware Web Components Are Easier Than You Think. For more information, please follow other related articles on the PHP Chinese website!