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

@@ -1,18 +1,21 @@
 class HelloWorld extends HTMLElement {
-    static get observedAttributes() {
+  static get observedAttributes() {
-      return ["data-name"];
+    return ["data-name"];
+  }
+
+  connectedCallback() {
+    let count = 0;
+
+    if (!('name' in this.dataset)) {
+      this.dataset.name = 'World'
     }
 
-    connectedCallback() {
+    this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
-      let count = 0;
+  }
-      this.onclick = () => {
-        this.setAttribute("data-name", `Clicked ${++count}x`);
-      };
-    }
 
-    attributeChangedCallback(property, previousValue, currentValue) {
+  attributeChangedCallback(property, previousValue, currentValue) {
-      if (property === "data-name" && previousValue !== currentValue) {
+    if (property === "data-name" && previousValue !== currentValue) {
-        this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
+      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 {