Web Components & Custom Elements – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by Aviral Srivastava

Web Components & Custom Elements: Building Reusable UI with Native Power

Introduction

In the ever-evolving landscape of web development, component-based architecture has emerged as a cornerstone for building complex and maintainable user interfaces. While frameworks like React, Angular, and Vue.js offer powerful component models, the web platform itself provides a native solution: Web Components. Web Components are a set of web platform APIs that allow developers to create reusable, encapsulated, and interoperable custom HTML elements. This article delves into the world of Web Components, focusing specifically on Custom Elements, one of the core specifications that enable their creation. We’ll explore the prerequisites, advantages, disadvantages, features, and provide practical examples to get you started.

Prerequisites

Before diving into Web Components and Custom Elements, it’s essential to have a solid understanding of the following core web technologies:

HTML: Fundamental knowledge of HTML is crucial as you’ll be defining custom HTML elements.
CSS: Styling Web Components requires CSS, including concepts like the Shadow DOM for encapsulation.
JavaScript: JavaScript is the engine behind Custom Elements, allowing you to define their behavior and functionality.
DOM (Document Object Model): Understanding how JavaScript interacts with the DOM is essential for manipulating and updating Web Components.

What are Web Components?

Web Components are a suite of technologies that enable you to create reusable custom HTML elements within your web applications. The specification consists of three main pillars:

Custom Elements: Allow you to define new HTML tags and define their behavior using JavaScript.
Shadow DOM: Provides encapsulation for Web Components, allowing you to isolate their styling and scripts from the rest of the page.
HTML Templates: Provides a way to define reusable HTML snippets that can be efficiently cloned and inserted into the DOM.

While all three aspects of Web Components contribute to the creation of reusable UI elements, Custom Elements are the foundation. We’ll focus primarily on Custom Elements in this article.

Custom Elements: Defining Your Own HTML Tags

Custom Elements empower you to create new HTML tags with associated JavaScript logic. These elements can be used just like standard HTML elements, promoting reusability and maintainability.

Defining a Custom Element

To define a Custom Element, you’ll use the customElements.define() method. This method takes two arguments:

Tag Name: A string representing the name of your custom element. The tag name must contain a hyphen (-) to avoid conflicts with existing and future standard HTML elements. For example, my-element, data-display, or profile-card are valid names.
Class Constructor: A JavaScript class that extends HTMLElement. This class defines the behavior and lifecycle of your custom element.

Here’s a basic example:

class MyElement extends HTMLElement {
  constructor() {
    super(); // Always call super() first in the constructor

    // Attach a shadow DOM to the element.
    this.attachShadow({ mode: 'open' });

    // Create a paragraph element
    const p = document.createElement('p');
    p.textContent = 'Hello from My Element!';

    // Append the paragraph to the shadow DOM
    this.shadowRoot.appendChild(p);
  }
}

customElements.define('my-element', MyElement);

In this code:

We define a class MyElement that extends HTMLElement. This inheritance provides access to the element’s lifecycle methods and properties.
The constructor() is called when the element is created. Inside the constructor, we must call super() to initialize the base HTMLElement class.
We use this.attachShadow({ mode: 'open' }) to create a Shadow DOM. The mode: 'open' option allows JavaScript from outside the component to access the Shadow DOM using element.shadowRoot. If mode: 'closed' is used, access is restricted.
We create a paragraph element, set its text content, and append it to the Shadow DOM. This ensures that the paragraph’s styling and behavior are encapsulated within the component.
Finally, customElements.define('my-element', MyElement) registers the custom element with the browser, associating the tag name my-element with the MyElement class.

Using the Custom Element

Now that we’ve defined my-element, we can use it in our HTML like any other element:

<!DOCTYPE html>
<html>
<head>
  <title>Custom Element Example</title>
  <script src="my-element.js"></script>
</head>
<body>
  <h1>Using My Element</h1>
  <my-element></my-element>
  <my-element></my-element>
</body>
</html>

This will render two instances of “Hello from My Element!” on the page.

Custom Element Lifecycle Callbacks

Custom Elements provide several lifecycle callbacks that allow you to execute code at specific points in the element’s life:

connectedCallback(): Invoked when the element is connected to the DOM (inserted into the document). This is a good place to fetch data, set up event listeners, or perform other initialization tasks that require the element to be in the DOM.
disconnectedCallback(): Invoked when the element is disconnected from the DOM (removed from the document). Use this to clean up resources, remove event listeners, or perform other tasks to prevent memory leaks.
attributeChangedCallback(name, oldValue, newValue): Invoked when one of the element’s observed attributes changes. To observe attributes, you must define a static observedAttributes getter.
adoptedCallback(): Invoked when the element is moved to a new document. This is a less commonly used callback.

Example with Lifecycle Callbacks

class MyGreeting extends HTMLElement {
  static get observedAttributes() {
    return ['name']; // List of attributes to observe
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  disconnectedCallback() {
    // Clean up resources (e.g., remove event listeners)
    console.log('MyGreeting element disconnected');
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this.render();
    }
  }

  render() {
    const name = this.getAttribute('name') || 'World';
    this.shadowRoot.innerHTML = `<p>Hello, ${name}!</p>`;
  }
}

customElements.define('my-greeting', MyGreeting);

In this example:

observedAttributes defines that the name attribute should be observed for changes.
attributeChangedCallback is called whenever the name attribute changes, triggering the render method to update the content.
render method dynamically creates the content of the web component.

Now you can use this component like this:

<my-greeting name="Alice"></my-greeting>
<my-greeting></my-greeting>
<script>
  const greeting = document.querySelector('my-greeting');
  greeting.setAttribute('name', 'Bob'); // Updates the content dynamically
</script>

Advantages of Using Custom Elements

Reusability: Create components once and reuse them throughout your application and across multiple projects.
Encapsulation: Shadow DOM provides strong encapsulation, preventing CSS and JavaScript conflicts with the rest of the page.
Interoperability: Web Components work seamlessly with existing frameworks and libraries, allowing you to integrate them into your current projects.
Native Web Technology: Web Components are based on web standards, ensuring future compatibility and avoiding vendor lock-in.
Maintainability: Encapsulation makes components easier to maintain and update without affecting other parts of your application.
Performance: Can offer performance advantages over framework-specific component models due to the smaller footprint and native implementation.

Disadvantages of Using Custom Elements

Browser Support: While browser support is very good, older browsers may require polyfills for full compatibility.
Learning Curve: Understanding the Shadow DOM, Custom Element lifecycle, and other Web Component concepts requires an initial investment of time.
Data Binding: Implementing complex data binding mechanisms can be more involved compared to frameworks that offer built-in data binding. You’ll likely rely more on DOM manipulation with JavaScript.
Limited Ecosystem: The ecosystem of pre-built Web Components is still maturing compared to frameworks like React or Angular, although it is constantly growing.
Boilerplate: Can require more boilerplate code for simple components compared to some frameworks.

Features of Custom Elements

Attributes: Custom elements can have attributes, which are reflected in the element’s properties.
Properties: Custom elements can have properties, which are JavaScript values associated with the element.
Events: Custom elements can dispatch and listen for events, allowing them to communicate with other parts of the application. Use dispatchEvent to create and trigger custom events.
Slots: Slots allow you to define placeholders within your custom element’s Shadow DOM where content from the parent element can be inserted.

Conclusion

Web Components and Custom Elements offer a powerful and standardized way to build reusable UI components for the web. While they might require a bit more manual work for certain features compared to frameworks, their native nature, interoperability, and encapsulation capabilities make them a valuable tool in any web developer’s arsenal. By leveraging the power of Web Components, you can create robust, maintainable, and future-proof web applications. As the web platform continues to evolve, Web Components are poised to play an increasingly important role in the future of web development. Consider exploring the other parts of the Web Components spec such as Shadow DOM and Templates, and explore libraries like LitElement and Stencil which make building them easier.

This content originally appeared on DEV Community and was authored by Aviral Srivastava