DEV Community

Shanthi's Dev Diary
Shanthi's Dev Diary

Posted on

Web Components: The Most Underrated Feature of the Modern Web

#webdev #frontend #webcomponents #javascript

A few days ago, one of my colleagues casually asked me:

“Do you know Web Components?”

My immediate answer was:

“Yes, of course.”

But a few seconds later I paused and thought:

Wait… what exactly are Web Components?

I had heard about them in tech talks, maybe read about them somewhere, but I couldn’t confidently say:

  • I had used them in a project
  • I fully understood how they worked
  • I knew when to use them

That moment made me curious.

So I started digging deeper… and realized something surprising:

Web Components might be one of the most underrated features of the modern web.

What Are Web Components?

Web Components are a set of native browser APIs that allow developers to create custom, reusable HTML elements.

Instead of relying on framework-specific components like in React, Angular, or Vue, Web Components let you define your own HTML tags.

Example:

<user-card name="Shanthi"></user-card>
Enter fullscreen mode Exit fullscreen mode

Once defined, the browser itself understands this component.

That means the same component can work in:

  • React apps
  • Angular apps
  • Vue apps
  • Plain HTML pages

Write once, use anywhere.

The 4 Building Blocks of Web Components

Web Components are built on four main browser standards.

1. Custom Elements

Custom Elements allow you to create your own HTML tags.

Example:

class UserCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<p>Hello ${this.getAttribute("name")}</p>`;
  }
}

customElements.define("user-card", UserCard);
Enter fullscreen mode Exit fullscreen mode

Now the browser recognizes:

<user-card name="Shanthi"></user-card>
Enter fullscreen mode Exit fullscreen mode

2. Shadow DOM

Shadow DOM provides encapsulation.

This means:

  • Styles inside the component stay inside the component
  • External CSS cannot break it

Example:

const shadow = this.attachShadow({ mode: "open" });

shadow.innerHTML = `
  <style>
    p { color: blue; }
  </style>
  <p>Hello from Shadow DOM</p>
`;
Enter fullscreen mode Exit fullscreen mode

Think of it like giving your component its own private DOM and CSS space.

3. HTML Templates

Templates allow you to define reusable HTML structures.

<template id="cardTemplate">
  <div class="card">
    <h3></h3>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

JavaScript can clone this template whenever needed.

4. ES Modules

Web Components are usually distributed using JavaScript modules.

import "./user-card.js";
Enter fullscreen mode Exit fullscreen mode

This keeps components modular and reusable across applications.

A Simple Web Component Example

Let’s build a small component.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    const name = this.getAttribute("name") || "Developer";

    this.innerHTML = `
      <style>
        div {
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 6px;
        }
      </style>
      <div>Hello ${name} 👋</div>
    `;
  }
}

customElements.define("hello-world", HelloWorld);
Enter fullscreen mode Exit fullscreen mode

Usage:

<hello-world name="Shanthi"></hello-world>
Enter fullscreen mode Exit fullscreen mode

Output:

Hello Shanthi 👋
Enter fullscreen mode Exit fullscreen mode

Why Web Components Matter

1. Framework Independence

A single Web Component can work in:

  • React
  • Angular
  • Vue

This is especially useful for organizations managing multiple frontend stacks.

2. Perfect for Design Systems

Web Components are great for building design system libraries.

Example components:

<company-button>
<company-modal>
<company-card>
Enter fullscreen mode Exit fullscreen mode

These can be reused across multiple applications without rewriting them for each framework.

3. Long-Term Stability

Frameworks evolve quickly.

But Web Components are browser standards, meaning they will keep working regardless of which framework becomes popular next.

Fun Facts About Web Components

🧠 Fun Fact #1

Many developers use Web Components without realizing it.

For example, the <video> and <audio> elements behave like complex components built into the browser.

🧠 Fun Fact #2

Google was one of the early promoters of Web Components and created the Polymer library to help developers adopt them.

🧠 Fun Fact #3

Salesforce built their UI framework called Lightning Web Components using this concept.

🧠 Fun Fact #4

Many modern microfrontend architectures use Web Components as a way to integrate applications built with different frameworks.

Why Aren’t Web Components More Popular?

This was the question I kept asking myself.

A few possible reasons:

  • Framework ecosystems became dominant
  • Earlier browser support was inconsistent
  • Developers are more comfortable using framework-specific solutions

But things are changing.

Modern browsers now fully support Web Components, and more teams are exploring them for design systems and cross-framework libraries.

Final Thoughts

It’s funny how a simple question from a colleague made me revisit a concept I had only heard about in passing.

Sometimes, technologies exist in the background for years before we truly notice their potential.

Web Components might not be the most talked-about topic in frontend development, but they offer something powerful:

Reusable UI components that work across frameworks.

And that makes them one of the most underrated features of the modern web.

💡 Now I’m curious

Have you used Web Components in production?

Or are they still one of those technologies you’ve heard about but never explored deeply?

Top comments (0)