feat(site, templates): use new WebComponent.io features

site/src/components/my-hello-world.js

@@ -3,14 +3,19 @@
  * @see https://WebComponent.io
  */
 class HelloWorld extends WebComponent {
-  static properties = ["my-name"];
+  static props = {
+    myName: 'World',
+    count: 0,
+  }
 
-  onInit() {
-    let count = 0;
-    this.onclick = () => this.props.myName = `Clicked ${++count}x`;
+  updateLabel(){
+    this.props.myName = `Clicked ${++this.props.count}x`;
   }
   
   get template() {
-    return `<button style="cursor:pointer">Hello ${this.props.myName ?? 'World'}!</button>`;
+    return html`
+      <button onClick=${() => this.updateLabel()} style="cursor:pointer">
+        Hello ${this.props.myName}!
+      </button>`;
   }
 }

templates/basic/src/components/my-hello-world.js

@@ -1,19 +1,21 @@
 /**
- * Custom element using a minimal Web Component Base class
+ * Custom element using a minimal base class
  * @see https://WebComponent.io
  */
 class MyHelloWorld extends WebComponent {
-  // tell browser which props to cause render
-  static properties = ["my-name"];
-
-  // Triggered when the component is connected to the DOM
-  onInit() {
-    let count = 0;
-    this.onclick = () => this.props.myName = `Clicked ${++count}x`
+  static props = {
+    myName: 'World',
+    count: 0
+  }
+
+  updateLabel() {
+    this.props.myName = `Clicked ${++this.props.count}x`
   }
 
-  // give readonly template
   get template() {
-    return `<button style="cursor:pointer">Hello ${this.props.myName ?? 'World'}!</button>`;
+    return html`
+      <button onClick=${() => this.updateLabel()} style="cursor:pointer">
+        Hello ${this.props.myName}!
+      </button>`;
   }
 }

templates/basic/src/components/vanilla-hello-world.js

@@ -1,22 +0,0 @@
-class HelloWorld extends HTMLElement {
-  static get observedAttributes() {
-    return ["my-name"];
-  }
-
-  connectedCallback() {
-    let count = 0;
-    const currentName = this.getAttribute('my-name');
-
-    if (!currentName) {
-      this.setAttribute('my-name', 'World')
-    }
-
-    this.onclick = () => this.setAttribute("my-name", `Clicked ${++count}x`);
-  }
-
-  attributeChangedCallback(property, previousValue, currentValue) {
-    if (property === "my-name" && previousValue !== currentValue) {
-      this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
-    }
-  }
-}

templates/basic/src/pages/index.html

@@ -25,38 +25,32 @@
     <main>
       <h2>Welcome to {{ project.name }}</h2>
       <p>
-        Here's a vanilla custom element:
-        <vanilla-hello-world></vanilla-hello-world>
+        Here's an interactive custom element:
+        <my-hello-world></my-hello-world>
       </p>
       <code-block language="js">
-class HelloWorld extends HTMLElement {
-  static get observedAttributes() {
-    return [&quot;my-name&quot;];
+class MyHelloWorld extends WebComponent {
+  static props = {
+    myName: &quot;World&quot;,
+    count: 0
   }
 
-  connectedCallback() {
-    let count = 0;
-    const currentName = this.getAttribute(&quot;my-name&quot;);
-
-    if (!currentName) {
-      this.setAttribute(&quot;my-name&quot;, &quot;World&quot;)
-    }
-
-    this.onclick = () => {
-      this.setAttribute(&quot;my-name&quot;, `Clicked ${++count}x`);
-    };
+  updateLabel() {
+    this.props.myName = `Clicked ${++this.props.count}x`;
   }
 
-  attributeChangedCallback(property, previousValue, currentValue) {
-    if (property === &quot;my-name&quot; && previousValue !== currentValue) {
-      this.innerHTML = `&lt;button style=&quot;cursor:pointer&quot;&gt;Hello ${currentValue}!&lt;/button&gt;`;
-    }
+  get template() {
+    return html`
+      &lt;button onClick=${() => this.updateLabel()} style="cursor:pointer"&gt;
+        Hello ${this.props.myName}!
+      &lt;/button&gt;`;
   }
-}
-      </code-block>
+}</code-block>
     </main>
     <my-footer>
-      <small>A project by <a href="{{ author.url }}">{{ author.name }}</a></small>
+      <small>
+        Learn how to build components easily at <a href="https://WebComponent.io">WebComponent.io</a>
+      </small>
     </my-footer>
   </body>
 </html>