Get the easy authoring experience you have come to love from popular JS frameworks -- with minimal tooling and very thin abstraction over the vanilla web platform.

• A robust props API that synchronizes your components' property values and HTML attributes
• Sensible life-cycle hooks that you understand and remember
• A minimal html function for tagged templates powered by Preact's tiny (450 Bytes) htm/mini
• Attach "side effects" that gets triggered on property value changes with attachEffect (example)

Why use this base class?

Writing Web Components from the vanilla HTMLElement can seem confusing and hard to maintain especially when coming from JS frameworks; and other projects will recommend complex setups before you can even get started...

This project aims to ease this with virtually zero need for advanced tooling and working closest to vanilla custom element APIs. It works on current-day browsers without needing compilers, transpilers, or polyfills.

Here's an interactive custom element:

import { WebComponent, html } from "https://unpkg.com/web-component-base@2.0.0/index.js";

export class Counter extends WebComponent {
  static props = {
    count: 0
  }
  get template() {
    return html`
      <button onClick=${() => ++this.props.count}>
        ${this.props.count}
      </button>
    `;
  }
}

customElements.define("my-counter", Counter);