From 8a66e3b9ad0f35623aa954f930481a18c3bb39ac Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Thu, 19 Oct 2023 16:09:11 +0200
Subject: [PATCH] vanilla example

---
 src/components/hello-world.js    | 17 ++++++++---------
 src/components/my-hello-world.js | 21 +++++++++++++++++++++
 src/pages/index.html             | 17 ++++++++++-------
 3 files changed, 39 insertions(+), 16 deletions(-)
 create mode 100644 src/components/my-hello-world.js

diff --git a/src/components/hello-world.js b/src/components/hello-world.js
index 1260729..a3bb0be 100644
--- a/src/components/hello-world.js
+++ b/src/components/hello-world.js
@@ -1,7 +1,7 @@
-class HelloWorld extends WebComponent {
-  static properties = ["name"];
+class HelloWorld extends HTMLElement {
+  static observedAttributes = ["name"];
 
-  onInit() {
+  connectedCallback() {
     console.log(`Greeting for ${this.name} initialized`);
     let count = 0;
     this.onclick = () => {
@@ -11,11 +11,10 @@ class HelloWorld extends WebComponent {
     this.setAttribute("title", "Click me please");
   }
 
-  onChanges(changes) {
-    console.log(changes);
-  }
-
-  get template() {
-    return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+  attributeChangedCallback(property, previousValue, currentValue) {
+    if (previousValue !== currentValue) {
+      this[property] = currentValue;
+      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
new file mode 100644
index 0000000..1260729
--- /dev/null
+++ b/src/components/my-hello-world.js
@@ -0,0 +1,21 @@
+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>`;
+  }
+}
diff --git a/src/pages/index.html b/src/pages/index.html
index 7637b21..e8879b1 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -14,21 +14,24 @@
       </p>
       <code-block class="language-js line-numbers" data-line="2">
         <pre>
-class HelloWorld extends WebComponent {
-  static properties = ["name"];
+class HelloWorld extends HTMLElement {
+  static observedAttributes = ["name"];
 
-  onInit() {
+  connectedCallback() {
     let count = 0;
     this.onclick = () => {
       this.setAttribute("name", `Clicked ${++count}x`);
     };
+    this.setAttribute("title", "Click me please");
   }
 
-  get template() {
-    return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+  attributeChangedCallback(property, previousValue, currentValue) {
+    if (previousValue !== currentValue) {
+      this[property] = currentValue;
+      this.innerHTML = `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+    }
   }
-}
-</pre>
+}</pre>
       </code-block>
       <p>
         Start at the very basic of writing HTML files and enhance with standard