cdn.html

   1 <head>
   2     <title>lit-html CDN example</title>
   3     <meta charset="utf-8">
   4 </head>
   5
   6 <script type="module">
   7 import { LitElement, html, css } from "https://cdn.pika.dev/lit-element";
   8
   9 class HelloWorld extends LitElement {
  10   render() {
  11     return html`<p>Hello world! Came here from ${document.referrer}</p>`;
  12   }
  13 }
  14
  15 class ClickCounter extends LitElement {
  16   static get properties() {
  17     return { value: { type: Number } };
  18   }
  19
  20   static get styles() {
  21     return css`
  22       button { color: red; font-size: 150%; };
  23     `;
  24   }
  25
  26   constructor() {
  27      super();
  28      this.value = 0;
  29   }
  30
  31   render() {
  32     return html`<button type="button" @click="${ e => { this.value += 1 } }">${ this.value }</button>`;
  33   }
  34 }
  35
  36 customElements.define('hello-world', HelloWorld);
  37 customElements.define('click-counter', ClickCounter);
  38 </script>
  39
  40 <body>
  41
  42 <h1>lit-html CDN examples</h1>
  43
  44 <h3>Hello World</h3>
  45 <hello-world></hello-world>
  46
  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>
  50
  51 </body>