From 750a30714defe766cf5cd7b1b9ca43068fc2fe95 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 18 Nov 2023 01:46:37 +0100
Subject: [PATCH] refactor(templates): exact behavior for examples

- made my-hello-world & vanilla-hello-world have the exact same behavior
---
 .../basic/src/components/vanilla-hello-world.js     | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/templates/basic/src/components/vanilla-hello-world.js b/templates/basic/src/components/vanilla-hello-world.js
index 3632152..69f69c3 100644
--- a/templates/basic/src/components/vanilla-hello-world.js
+++ b/templates/basic/src/components/vanilla-hello-world.js
@@ -1,20 +1,21 @@
 class HelloWorld extends HTMLElement {
   static get observedAttributes() {
-    return ["data-name"];
+    return ["my-name"];
   }
 
   connectedCallback() {
     let count = 0;
-    
-    if (!('name' in this.dataset)) {
-      this.dataset.name = 'World';
+    const currentName = this.getAttribute('my-name');
+
+    if (!currentName) {
+      this.setAttribute('my-name', 'World')
     }
 
-    this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
+    this.onclick = () => this.setAttribute("my-name", `Clicked ${++count}x`);
   }
 
   attributeChangedCallback(property, previousValue, currentValue) {
-    if (property === "data-name" && previousValue !== currentValue) {
+    if (property === "my-name" && previousValue !== currentValue) {
       this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
     }
   }