<my-greeting name="World" id="my-app"></my-greeting>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

import Tonic from "https://cdn.skypack.dev/@optoolco/tonic";

class MyGreeting extends Tonic {
  click(e) {
    const trigger = Tonic.match(e.target, "button");
    this.state.counter++;
    this.reRender();
  }
  render() {
    if (typeof this.state.counter === "undefined") {
      this.state.counter = 0;
    }
    return this.html`<div>Hello, ${
      this.props.name
    }! <button>${this.state.counter.toString()}</button></div>`;
  }
}

Tonic.add(MyGreeting);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.