Web Components

May 28, 2024 | seedling, permanent

tags :

Summary #

“Web Components” is an umbrella term that refers to a collection of web standards *focused on enabling the creation of custom HTML elements. Some of the standards under this umbrella include the ability to define new HTML tags, plug into a standard component lifecycle, encapsulate HTML rendering and CSS, parameterize CSS, skin components, and more. Each of these platform features is defined by the W3C and has shipped in every major browser today.

Web Components allow developers to create reusable custom HTML tags with encapsulated functionality, which can be utilized across any web project, offering a modular and efficient approach to web development.

ref

Pros #

Framework Agnostic: Can be used with any JavaScript framework or with no framework, offering remarkable flexibility.
HTML Standard Compliance: Utilizes native HTML, CSS, and JavaScript, thereby enjoying native browser support across most modern browsers.
Easy to Share and Reuse Facilitates the management of multiple projects or ecosystems with different technology stacks, streamlining component sharing and reuse.
No Complex Dependencies Allows for the integration of specific custom elements without the need for importing complex dependencies, distinguishing it from popular framework alternatives.

Cons #

Loading Time Custom elements may experience a delay as they are registered and rendered via JavaScript, potentially affecting initial display.
SEO Challenges Not inherently SEO-friendly, posing potential visibility issues for web components in search engine indexing, despite existing library solutions for this problem.
Style Sharing Limitations The encapsulation feature, while beneficial for isolation, complicates code sharing between components.
Browser Support Despite wide support, discrepancies in implementation details across browsers can pose compatibility issues.

Conclusion #

Despite its pros and cons, Web Components represent a significant and flexible option in web development, worthwhile for consideration in project development or updates.

In popular Design Systems #

Three most popular design systems

implement their respective design system using Web Components and it is the only “Framework” common in all of them.