feat(site): use vanilla-hello-world

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

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 {