]> piware.de Git - webcomponents.git/commitdiff
cdn.html: Add element with state and styling
authorMartin Pitt <martin@piware.de>
Fri, 1 Nov 2019 17:21:18 +0000 (18:21 +0100)
committerMartin Pitt <martin@piware.de>
Fri, 1 Nov 2019 17:21:18 +0000 (18:21 +0100)
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>