Update the demo to use an <app-root> component (#3)

jbuckner · web-flow · commit 195411dc58bb · 2021-03-30T13:25:58.000-07:00
This makes it easier to create module demos since you can use Typescript all the way down.
diff --git a/demo/app-root.ts b/demo/app-root.ts
@@ -0,0 +1,21 @@
+import { html, css, LitElement, customElement } from 'lit-element';
+import '../src/your-webcomponent';
+
+@customElement('app-root')
+export class AppRoot extends LitElement {
+  render() {
+    return html`
+      <your-webcomponent title="Hello">
+        <div slot="my-slot">Some LightDOM Content</div>
+      </your-webcomponent>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: 25px;
+      color: var(--your-webcomponent-text-color, #000);
+    }
+  `;
+}
diff --git a/demo/index.html b/demo/index.html
@@ -13,23 +13,9 @@
   </style>
 </head>
 <body>
-  <div id="demo"></div>
+  <app-root></app-root>
 
-  <script type="module">
-    import { html, render } from 'lit-html';
-      import '../dist/index.js';
-
-    const title = 'Hello owc World!';
-    render(
-      html`
-        <your-webcomponent .title=${title}>
-          <div slot="my-slot">
-            Some lightDOM slotted content
-          </div>
-        </your-webcomponent>
-      `,
-      document.querySelector('#demo')
-    );
+  <script type="module" src="../dist/demo/app-root.js">
   </script>
 </body>
 </html>
diff --git a/src/your-webcomponent.ts b/src/your-webcomponent.ts
@@ -2,27 +2,27 @@ import { html, css, LitElement, property, customElement } from 'lit-element';
 
 @customElement('your-webcomponent')
 export class YourWebComponent extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      padding: 25px;
-      color: var(--your-webcomponent-text-color, #000);
-    }
-  `;
-
   @property({ type: String }) title = 'Hey there';
 
   @property({ type: Number }) counter = 5;
 
-  __increment() {
+  private increment() {
     this.counter += 1;
   }
 
   render() {
     return html`
       <h2>${this.title}, Number: ${this.counter}!</h2>
-      <button @click=${this.__increment}>increment</button>
+      <button @click=${this.increment}>increment</button>
       <slot name="my-slot"> </slot>
     `;
   }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: 25px;
+      color: var(--your-webcomponent-text-color, #000);
+    }
+  `;
 }
