By extending our base class, you get the easy authoring experience you have come to expect when coming from more mature JS frameworks-- all with zero-dependency, 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)
• Provided out-of-the-box with McFly, a powerful no-framework framework

Why use this base class?

Writing Web Components from the vanilla HTMLElement can easily get confusing and hard to maintain, especially when coming from JS frameworks with advanced tooling.

This project aims to ease this with the thinnest possible abstraction from vanilla and virtually zero need for advanced tooling. It works without bundlers, transpilers, or polyfills.

When you extend the WebComponent class for your component, you only have to define the template and properties. Any change in any property value will automatically cause just the component UI to render.

The result is a reactive UI on property changes:

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);