React, Angular, Vue.js, Svelte - the list of JavaScript frameworks keeps growing. But with Web Components, there’s a standardized approach built directly into browsers. Does this mean the end of the framework jungle?

What are Web Components?

Web Components are a set of web platform APIs that enable the creation of reusable, custom HTML elements. The standard consists of four main technologies:

1. Custom Elements

Custom Elements allow defining your own HTML tags:

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        button { 
          background: #007bff; 
          color: white; 
          border: none;
          padding: 10px 20px;
          border-radius: 4px;
        }
      </style>
      <button><slot></slot></button>
    `;
  }
}

customElements.define('my-button', MyButton);

Usage in HTML:

<my-button>Click me</my-button>

2. Shadow DOM

Shadow DOM encapsulates CSS and DOM of a component, so styles don’t leak out and aren’t affected from outside:

const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = '<style>/* encapsulated styles */</style>';

3. HTML Templates

The <template> element allows defining reusable HTML that isn’t rendered immediately:

<template id="my-template">
  <div class="card">
    <h2><slot name="title">Default Title</slot></h2>
    <p><slot name="content">Default Content</slot></p>
  </div>
</template>

4. ES Modules

JavaScript modules allow importing and exporting functions, classes, and components:

import { MyButton } from './my-button.js';

Advantages of Web Components

Framework-Agnostic

Web Components work with any framework or without any framework at all. A component created once can be used in React, Angular, Vue, or plain HTML.

Standardized

Unlike framework-specific components, Web Components are a web standard supported by all modern browsers.

Encapsulation

Through Shadow DOM, styles and DOM are cleanly encapsulated. No more conflicts with global styles.

Future-Proof

As a browser standard, Web Components will be supported long-term, regardless of which framework is currently popular.

Disadvantages and Challenges

Less Functionality Out-of-the-Box

Web Components don’t provide built-in state management, routing, or reactive data binding like modern frameworks.

More Boilerplate Code

For simple components, more code is needed than in React, for example:

// Web Component
class Counter extends HTMLElement {
  constructor() {
    super();
    this._count = 0;
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.render();
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      this._count++;
      this.render();
    });
  }
  
  render() {
    this.shadowRoot.innerHTML = `
      <button>Count: ${this._count}</button>
    `;
  }
}

// React Equivalent
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Tooling and Developer Experience

Frameworks like React offer more mature developer tools, hot reloading, and a better debugging experience.

Web Components and Frameworks - Coexistence Rather Than Competition

In practice, Web Components and frameworks are not mutually exclusive. There are several sensible combinations:

1. Shared Components

For design systems or component libraries that need to be used across frameworks, Web Components are ideal.

2. Micro-Frontends

In micro-frontend architectures, different teams can use different frameworks while interacting through Web Components.

3. Framework Wrappers

Libraries like Lit or Stencil simplify the creation of Web Components and offer framework-like features such as reactive properties.

// With Lit
import { LitElement, html, css } from 'lit';

class MyCounter extends LitElement {
  static properties = {
    count: { type: Number }
  };
  
  constructor() {
    super();
    this.count = 0;
  }
  
  render() {
    return html`
      <button @click=${() => this.count++}>
        Count: ${this.count}
      </button>
    `;
  }
}

Conclusion

Web Components won’t replace frameworks like React, but they will play an important role - especially for reusable UI components and micro-frontends. The future probably lies in a combination: frameworks for application logic and Web Components for portable, encapsulated UI building blocks.

At innFactory, we closely monitor the development of Web Components and use them where they make sense - especially when developing design systems and integrating different technology stacks.