Reactive Web Components Are Here

I love web components! Even better now with all the improvements they received over the last few years. However, there are still many limitations, often requiring verbose setups, that make dealing with components painful.

React 19 + WebComponent

There are many amazing libraries that simplify this, but I hate libraries that require you to build or compile your code to get something while adding additional syntax that just does not need to be there.

This is how a simple count button would look like using native Web APIs, Vanilla JavaScript and while complying with the correct HTML tag web standards.

class CountButton extends HTMLElement {
  static observedAttributes = ['count'];
  #root;
  
  get count() {
    return Number(this.getAttribute('count') ?? 0);
  }
  
  set count(newCount) {
    this.setAttribute('count', String(newCount));
  }
  
  constructor() {
    super();
    
    this.#root = this.attachShadow({mode: 'open'});
    
    this.#root.innerHTML = `
      <button type="button">Count: ${this.count}</button>
    `
    
    const btn = this.#root.children[0]…