From b3c37ebb25efd7f8d1de1628ddc96be5ffbee111 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Thu, 19 Oct 2023 16:29:40 +0200
Subject: [PATCH] feat: explicit parallel universes

---
 src/components/hello-world.js    | 13 +++++++++----
 src/components/my-hello-world.js |  6 ------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/hello-world.js b/src/components/hello-world.js
index a11d43b..8501468 100644
--- a/src/components/hello-world.js
+++ b/src/components/hello-world.js
@@ -1,11 +1,11 @@
 class HelloWorld extends HTMLElement {
-  static observedAttributes = ["name"];
+  static get observedAttributes() {
+    return ["name"];
+  }
 
   connectedCallback() {
-    console.log(`Greeting for ${this.name} initialized`);
     let count = 0;
     this.onclick = () => {
-      console.log("Clicked!");
       this.setAttribute("name", `Clicked ${++count}x`);
     };
     this.setAttribute("title", "Click me please");
@@ -13,7 +13,12 @@ class HelloWorld extends HTMLElement {
 
   attributeChangedCallback(property, previousValue, currentValue) {
     if (previousValue !== currentValue) {
-      this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
+      this[property] = currentValue;
+      this.render();
     }
   }
+
+  render() {
+    this.innerHTML = `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+  }
 }
diff --git a/src/components/my-hello-world.js b/src/components/my-hello-world.js
index 1260729..dc2ab43 100644
--- a/src/components/my-hello-world.js
+++ b/src/components/my-hello-world.js
@@ -2,19 +2,13 @@ class HelloWorld extends WebComponent {
   static properties = ["name"];
 
   onInit() {
-    console.log(`Greeting for ${this.name} initialized`);
     let count = 0;
     this.onclick = () => {
-      console.log("Clicked!");
       this.setAttribute("name", `Clicked ${++count}x`);
     };
     this.setAttribute("title", "Click me please");
   }
 
-  onChanges(changes) {
-    console.log(changes);
-  }
-
   get template() {
     return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
   }