<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.