2 <title>lit-html CDN example</title>
7 import { LitElement, html, css } from "https://cdn.pika.dev/lit-element";
9 class HelloWorld extends LitElement {
11 return html`<p>Hello world! Came here from ${document.referrer}</p>`;
15 class ClickCounter extends LitElement {
16 static get properties() {
17 return { value: { type: Number } };
22 button { color: red; font-size: 150%; };
32 return html`<button type="button" @click="${ e => { this.value += 1 } }">${ this.value }</button>`;
36 customElements.define('hello-world', HelloWorld);
37 customElements.define('click-counter', ClickCounter);
42 <h1>lit-html CDN examples</h1>
45 <hello-world></hello-world>
47 <h3>Stateful and with shadow DOM styling</h3>
48 <p>Click counter: <click-counter></click-counter> and one with a non-default
49 attribute: <click-counter value="10"></click-counter></p>