Our base class provides zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily

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.

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>`;
  }
}