cdn.html: Add element with state and styling

[webcomponents.git] / cdn.html
diff --git a/cdn.html b/cdn.html

index 115a00c74e657125794f809e0f1dc2b3255f77ec..eb24bb33a2f410db8ba572a03bc06e143b651dcb 100644 (file)
--- a/cdn.html
+++ b/cdn.html
@@ -4,7 +4,7 @@
  </head>
  
  <script type="module">
-import { LitElement, html } from "https://cdn.pika.dev/lit-element";
+import { LitElement, html, css } from "https://cdn.pika.dev/lit-element";
  
  class HelloWorld extends LitElement {
    render() {
@@ -12,7 +12,29 @@ class HelloWorld extends LitElement {
    }
  }
  
+class ClickCounter extends LitElement {
+  static get properties() {
+    return { value: { type: Number } };
+  }
+
+  static get styles() {
+    return css`
+      button { color: red; font-size: 150%; };
+    `;
+  }
+
+  constructor() {
+     super();
+     this.value = 0;
+  }
+
+  render() {
+    return html`<button type="button" @click="${ e => { this.value += 1 } }">${ this.value }</button>`;
+  }
+}
+
  customElements.define('hello-world', HelloWorld);
+customElements.define('click-counter', ClickCounter);
  </script>
  
  <body>
@@ -20,6 +42,10 @@ customElements.define('hello-world', HelloWorld);
  <h1>lit-html CDN examples</h1>
  
  <h3>Hello World</h3>
-<hello-world />
+<hello-world></hello-world>
+
+<h3>Stateful and with shadow DOM styling</h3>
+<p>Click counter: <click-counter></click-counter> and one with a non-default
+attribute: <click-counter value="10"></click-counter></p>
  
  </body>