Web Components - An Overview, Advantages, and Use Case

Web Components are a suite of technologies that allow you to create custom, reusable HTML elements. Essentially, they enable you to define your own HTML tags with their own styling, behavior, and encapsulated functionality.

Core Concepts

There are a few core concepts to be understood while discussing web components.

Custom Elements: These are the building blocks, allowing you to define new HTML tags with specific functionalities. There are two parts to Custom Elements: autonomous custom elements and customized built-in elements. Autonomous custom elements are HTML elements that are entirely separated from native HTML elements; they are essentially built from the bottom up using the Custom Elements API. Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality.

Shadow DOM: This isolates a component’s styles and markup from the rest of the document, preventing style conflicts and encapsulation.

The Shadow DOM is a functionality that allows the web browser to render DOM elements without putting them into the main document DOM tree. This creates a barrier between what the developer and the browser can reach; the developer cannot access the Shadow DOM in the same way they would with nested elements, while the browser can render and modify that code the same way it would with nested elements. 

The impact of CSS scoped within the Shadow DOM of a particular element is that HTML elements can be encapsulated without the risk of CSS styles leaking and affecting elements that they were not supposed to affect. Although these elements are encapsulated with regard to HTML and CSS, they can still fire events that can be picked up by other elements in the document.

The scoped subtree in an element is called a shadow tree. The element the shadow tree is attached to is called a shadow host.

A Shadow DOM must always be connected to an existing element, either through attaching it as a literal element or through scripting. In JavaScript, Shadow DOMs are attached to an element using Element.attachShadow().

HTML Template: An HTML template is a way to insert chunks of HTML that are cloned from the template at will. These are reusable HTML fragments that can be instantiated later.

Custom Events: Components can communicate with other parts of the application by dispatching custom events.

Libraries

There are many libraries that are built on Web Components with the aim of increasing the level of abstraction when creating custom elements. Some of these libraries are X-Tag, Slim.js, Polymer, Bosonic, Riot.js, Salesforce Lightning Web Components, DataFormsJS, Telepathy, and Wompo.

Benefits of Web Components

Web Components offer a powerful way to create reusable and encapsulated UI elements. Here is a breakdown of their key advantages:

Reusability

Create once, use everywhere: Develop components once and reuse them across different projects or parts of the same application.

Shared component libraries: Build internal or external component libraries for consistent UI elements.

Encapsulation

Isolated styles: Shadow DOM ensures that component styles do not interfere with the rest of the page.

Independent behavior: Components can manage their own state and logic without affecting other parts of the application.

Performance

Optimized rendering: Web components can be optimized for performance through techniques like lazy loading and shadow DOM.

Reduced bundle size: Custom elements can lead to smaller JavaScript bundles.

Framework Agnostic

Flexibility: Use web components in any JavaScript framework (React, Angular, Vue) or even without a framework.

Technology independence: Build components that can be used in various environments.

Improved Maintainability

Modular structure: Break down complex UIs into smaller, manageable components.

Easier updates: Changes to a component are isolated, reducing the risk of unintended consequences.

Other Benefits

Accessibility: Web components can be built with accessibility in mind from the start.

Design systems: Create design systems based on web components for consistent UI across an organization.

Micro-frontends: Build independent components that can be composed into larger applications.

By leveraging these benefits, web components can significantly enhance your web development process and create more efficient, maintainable, and reusable UI elements.

At Reflections, using web components we develop technology-agnostic modernization approaches for our customers. When one of our customers, a credit reporting Agency in USA needed to do a Legacy System Modernization, we proposed a solution based on web components. An application developed in one technology needed to be rebranded and made as part of one entirely different eco system with minimal effort. We migrated the old technology to a modern and flexible tech stack that could seamlessly integrate acquired and existing products, developing a technology-agnostic modernization approach using web components.

Syam Kumar M

Senior Solution Architect - Digital Practice