← Home

Web Components vs. the World

Published • Last Updated • 1 minute

The phrase Web Components on the left with the right populated with five different logos of other javascript frameworks like React and Angular.

This isn't a "Web Components is the only way to make components" post, and neither was my last post. This is an attempt to present you (and myself) with as close to a 1-to-1 comparison of select frameworks so you can decide which one is best for you and your project.

Each snippet below contains a button with an event handler that, when clicked, increments a value, and that change to the value appears within the button's label.

Web Components

class InteractionExample extends HTMLElement {
  count = 0;

  constructor() {

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

    const button = document.createElement('button');

      document.createTextNode(`You clicked me ${this.count} times!`)

    button.addEventListener('click', e => {
      this.count += 1;

      button.innerText = `You clicked me ${this.count} times!`;


customElements.define('interaction-example', InteractionExample);


import { useState } from 'react';

export default function Button() {
  const [count, setCount] = useState(0);

  const handleClick = () => setCount(count => count + 1);

  return <button onClick={handleClick}>You clicked me {count} times!</button>;


import { render } from 'solid-js/web';
import { createSignal } from 'solid-js';

const [count, setCount] = createSignal(0);

const handleClick = () => setCount(count() + 1);

  () => <button onClick={handleClick}>You clicked me {count()} times!</button>,


<script setup>
  import { ref } from 'vue';
  const count = ref(0);

  <button @click="count++">You clicked me {{count}} times!</button>


  let count = 0;

  const handleClick = () => count++;

<button on:click="{handleClick}">You clicked me {count} times!</button>


import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

  selector: 'add-one-button',
  standalone: true,
  template: `<button (click)="count = count + 1">
    You clicked me {{ count }} times!
export class AddOneButtonComponent {
  count = 0;


As to which one I prefer, my choices are Web Components (obviously) and React. My choice of React is primarily due to exposure via personal and client projects.

I'm not much of a fan of magic. Or, more clearly put, I'd rather work with functional programming and built-in JavaScript functionality over most things.