Home > Web Front-end > CSS Tutorial > Context-Aware Web Components Are Easier Than You Think

Context-Aware Web Components Are Easier Than You Think

William Shakespeare
Release: 2025-03-15 10:25:09
Original
781 people have browsed it

Context-Aware Web Components Are Easier Than You Think

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.

Series Overview

This article is part of a series on simplifying web component development:

  • Web Components: Easier Than You Think
  • Interactive Web Components: Easier Than You Think
  • Using Web Components in WordPress: Easier Than You Think
  • Supercharging Built-in Elements with Web Components: Easier Than You Think
  • Context-Aware Web Components: Easier Than You Think (This Article)
  • Web Component Pseudo-Classes and Pseudo-Elements: Easier Than You Think

Web Component Lifecycle Callbacks

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.

Post-Apocalyptic Person Component

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 ...
  }
);
Copy after login

Our initial HTML:

<div class="humans">
  <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies">
  <postapocalyptic-person></postapocalyptic-person>
</div>
Copy after login

Using 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);
}
Copy after login

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.

Counting People with 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>
Copy after login

Button event listeners:

// ... (add/remove person logic) ...
Copy after login

Updated connectedCallback to update counts:

connectedCallback() {
  // ... (image logic) ...
  // Update counts based on image source
}
Copy after login

Updating Counts with 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
}
Copy after login

Clown Detection with 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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template