feat(site, templates): use HTMLElement.dataset 🤗

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

@@ -5,9 +5,12 @@ class HelloWorld extends HTMLElement {
 
   connectedCallback() {
     let count = 0;
-    this.onclick = () => {
+
-      this.setAttribute("data-name", `Clicked ${++count}x`);
+    if (!('name' in this.dataset)) {
-    };
+      this.dataset.name = 'World'
+    }
+
+    this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
   }
 
   attributeChangedCallback(property, previousValue, currentValue) {

site/src/pages/index.html

@@ -34,7 +34,7 @@
         <code-block>npm create <strong style="color: var(--color-blue)">mcfly</strong>@latest</code-block>
         <p>
           Here's a sample interactive custom element:
-          <vanilla-hello-world data-name="McFly"></vanilla-hello-world>
+          <vanilla-hello-world></vanilla-hello-world>
         </p>
         <p>
           Start at the very basic of writing HTML files and enhance with

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

@@ -5,9 +5,12 @@ class HelloWorld extends HTMLElement {
 
   connectedCallback() {
     let count = 0;
-      this.onclick = () => {
+
-        this.setAttribute("data-name", `Clicked ${++count}x`);
+    if (!('name' in this.dataset)) {
-      };
+      this.dataset.name = 'World'
+    }
+
+    this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
   }
 
   attributeChangedCallback(property, previousValue, currentValue) {
@@ -15,4 +18,4 @@ class HelloWorld extends HTMLElement {
       this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
     }
   }
-  }
+}

templates/basic/src/pages/index.html

@@ -25,8 +25,7 @@
     <main>
       <h2>Welcome to {{ project.name }}</h2>
       <p>
-        Here's a vanilla custom element:
+        Here's a vanilla custom element: <vanilla-hello-world/>
-        <vanilla-hello-world data-name="{{project.name}}" />
       </p>
       <code-block language="js">
 class HelloWorld extends HTMLElement {