Get the easy authoring experience you have come to love and build standard custom elements with zero bundlers, transpilers or polyfills.

• A robust props API that synchronizes your components' property values and HTML attributes
• Sensible life-cycle hooks that you understand and remember
• Use a custom templating syntax you are already familiar with, like lit-html (example)
• Built-in 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 directly from HTMLElement can seem confusing and hard to maintain, especially when coming from popular JS frameworks and other projects that recommend complex setups.

This project aims to address this with virtually zero tooling required and thin abstractions from vanilla custom element APIs – giving you only the bare minimum code to be productive.

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