By extending our base class, you get an easy authoring experience as you would expect in writing your components:

• A props API that synchronizes your components' property values and HTML attributes
• Sensible life-cycle hooks that you understand and remember
• Extensible templates & renderer (examples in-progress)
• Provided out-of-the-box with McFly, a powerful no-framework framework

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 from "https://unpkg.com/web-component-base@1.13.0/WebComponent.min.js";

export class Counter extends WebComponent {
  static properties = ["count"];
  onInit() {
    this.props.count = 0;
    this.onclick = () => ++this.props.count;
  }
  get template() {
    return `<button>${this.props.count}</button>`;
  }
}

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