<simple-greeting name="World"></simple-greeting>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
import { html, LitElement } from "https://cdn.skypack.dev/lit";

class SimpleGreeting extends LitElement {
  static properties = {
    name: { type: String },
    _counter: { state: true }
  };

  constructor() {
    super();
    this._counter = 0;
  }

  _increment(e) {
    this._counter++;
  }

  render() {
    return html`
      <div>
        Hello, ${this.name}!
        <button @click="${this._increment}">${this._counter}</button>
      </div>
    `;
  }
}
customElements.define("simple-greeting", SimpleGreeting);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.