From 9b6043b219ab4d8c24f3f5f3c998017bdcbc2e3e Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Fri, 20 Oct 2023 11:23:57 +0200
Subject: [PATCH] refactor: examples to use `data-name` prop

---
 src/components/my-hello-world.js      | 6 +++---
 src/components/vanilla-hello-world.js | 6 +++---
 src/pages/demo/index.html             | 2 +-
 src/pages/index.html                  | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/my-hello-world.js b/src/components/my-hello-world.js
index dc2ab43..d2efed6 100644
--- a/src/components/my-hello-world.js
+++ b/src/components/my-hello-world.js
@@ -1,15 +1,15 @@
 class HelloWorld extends WebComponent {
-  static properties = ["name"];
+  static properties = ["data-name"];
 
   onInit() {
     let count = 0;
     this.onclick = () => {
-      this.setAttribute("name", `Clicked ${++count}x`);
+      this.setAttribute("data-name", `Clicked ${++count}x`);
     };
     this.setAttribute("title", "Click me please");
   }
 
   get template() {
-    return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+    return `<button style="cursor:pointer">Hello ${this["data-name"]}!</button>`;
   }
 }
diff --git a/src/components/vanilla-hello-world.js b/src/components/vanilla-hello-world.js
index d0e0e23..12a1564 100644
--- a/src/components/vanilla-hello-world.js
+++ b/src/components/vanilla-hello-world.js
@@ -1,17 +1,17 @@
 class HelloWorld extends HTMLElement {
   static get observedAttributes() {
-    return ["name"];
+    return ["data-name"];
   }
 
   connectedCallback() {
     let count = 0;
     this.onclick = () => {
-      this.setAttribute("name", `Clicked ${++count}x`);
+      this.setAttribute("data-name", `Clicked ${++count}x`);
     };
   }
 
   attributeChangedCallback(property, previousValue, currentValue) {
-    if (previousValue !== currentValue) {
+    if (property === "data-name" && previousValue !== currentValue) {
       this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
     }
   }
diff --git a/src/pages/demo/index.html b/src/pages/demo/index.html
index 99ec905..e767139 100644
--- a/src/pages/demo/index.html
+++ b/src/pages/demo/index.html
@@ -46,7 +46,7 @@
         <h2>Demo Page</h2>
         <a href="/demo/about">{{ count }}</a>
         <div>
-          <my-hello-world name="{{name }}"></my-hello-world>
+          <my-hello-world data-name="{{name }}"></my-hello-world>
         </div>
         <code-block language="js">const name = "Nitro"</code-block>
         <p>some text: {{greeting}}</p>
diff --git a/src/pages/index.html b/src/pages/index.html
index 232bec2..8d4db5b 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -31,7 +31,7 @@
         </p>
         <p>
           Here's a sample interactive custom element:
-          <vanilla-hello-world name="McFly"></vanilla-hello-world>
+          <vanilla-hello-world data-name="McFly"></vanilla-hello-world>
         </p>
         <p>
           Start at the very basic of writing HTML files and enhance with