refactor: examples to use data-name prop

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>`;
   }
 }

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>`;
     }
   }

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>

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