From 0e178fda7960bf9a7ffb680ad45881e567a7eb05 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 12 Nov 2023 16:56:41 +0100
Subject: [PATCH] feat(site): use vanilla-hello-world

---
 .../src/components/vanilla-hello-world.js      | 18 ++++++++++++++++++
 templates/basic/src/pages/index.html           |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 templates/basic/src/components/vanilla-hello-world.js

diff --git a/templates/basic/src/components/vanilla-hello-world.js b/templates/basic/src/components/vanilla-hello-world.js
new file mode 100644
index 0000000..0301bb4
--- /dev/null
+++ b/templates/basic/src/components/vanilla-hello-world.js
@@ -0,0 +1,18 @@
+class HelloWorld extends HTMLElement {
+    static get observedAttributes() {
+      return ["data-name"];
+    }
+  
+    connectedCallback() {
+      let count = 0;
+      this.onclick = () => {
+        this.setAttribute("data-name", `Clicked ${++count}x`);
+      };
+    }
+  
+    attributeChangedCallback(property, previousValue, currentValue) {
+      if (property === "data-name" && previousValue !== currentValue) {
+        this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
+      }
+    }
+  }
\ No newline at end of file
diff --git a/templates/basic/src/pages/index.html b/templates/basic/src/pages/index.html
index a316af5..14132c0 100644
--- a/templates/basic/src/pages/index.html
+++ b/templates/basic/src/pages/index.html
@@ -22,7 +22,7 @@
       <h2>Welcome to {{ name }}</h2>
       <p>
         Here's a vanilla custom element:
-        <my-hello-world data-name="{{name}}" />
+        <vanilla-hello-world data-name="{{name}}" />
       </p>
       <code-block language="js">
 class HelloWorld extends HTMLElement {