diff --git a/site/src/components/my-hello-world.js b/site/src/components/my-hello-world.js
index 6a0c1eb..d9d01c6 100644
--- a/site/src/components/my-hello-world.js
+++ b/site/src/components/my-hello-world.js
@@ -7,13 +7,11 @@ class HelloWorld extends WebComponent {
 
   onInit() {
     let count = 0;
-    this.onclick = () => {
-      this.setAttribute("data-name", `Clicked ${++count}x`);
-    };
-    this.setAttribute("title", "Click me please");
+    this.dataset.name = this.dataset.name ?? 'World';
+    this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
   }
 
   get template() {
-    return `<button style="cursor:pointer">Hello ${this.dataName}!</button>`;
+    return `<button style="cursor:pointer">Hello ${this.dataset.name}!</button>`;
   }
 }
diff --git a/site/src/components/vanilla-hello-world.js b/site/src/components/vanilla-hello-world.js
index 66ccfb8..e2cea68 100644
--- a/site/src/components/vanilla-hello-world.js
+++ b/site/src/components/vanilla-hello-world.js
@@ -5,11 +5,7 @@ class HelloWorld extends HTMLElement {
 
   connectedCallback() {
     let count = 0;
-
-    if (!('name' in this.dataset)) {
-      this.dataset.name = 'World'
-    }
-
+    this.dataset.name = this.dataset.name ?? 'World';
     this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
   }
 
diff --git a/templates/basic/src/components/my-hello-world.js b/templates/basic/src/components/my-hello-world.js
index 58d1ede..663e4ea 100644
--- a/templates/basic/src/components/my-hello-world.js
+++ b/templates/basic/src/components/my-hello-world.js
@@ -3,28 +3,18 @@
  * @see https://ayco.io/n/web-component-base
  */
 class MyHelloWorld extends WebComponent {
-  // intialize props
-  dataName = 'World';
-
   // tell browser which props to cause render
   static properties = ["data-name"];
 
   // Triggered when the component is connected to the DOM
   onInit() {
     let count = 0;
-    // initialize event handler
-    this.onclick = () => {
-      this.setAttribute("data-name", `Clicked ${++count}x`);
-    };
+    this.dataset.name = this.dataset.name ?? 'World';
+    this.onclick = () => this.dataset.name = `Clicked ${++count}x`
   }
 
   // give readonly template
   get template() {
-    /**
-     * any attribute/property in kebab-case...
-     * can be accessed via its camelCase counterpart
-     * example: data-name prop is accessible as this.dataName
-     */
-    return `<button style="cursor:pointer">Hello ${this.dataName}!</button>`;
+    return `<button style="cursor:pointer">Hello ${this.dataset.name}!</button>`;
   }
 }
diff --git a/templates/basic/src/components/vanilla-hello-world.js b/templates/basic/src/components/vanilla-hello-world.js
index 66ccfb8..e2cea68 100644
--- a/templates/basic/src/components/vanilla-hello-world.js
+++ b/templates/basic/src/components/vanilla-hello-world.js
@@ -5,11 +5,7 @@ class HelloWorld extends HTMLElement {
 
   connectedCallback() {
     let count = 0;
-
-    if (!('name' in this.dataset)) {
-      this.dataset.name = 'World'
-    }
-
+    this.dataset.name = this.dataset.name ?? 'World';
     this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
   }
 
diff --git a/templates/basic/src/pages/index.html b/templates/basic/src/pages/index.html
index a7ca67d..29d737c 100644
--- a/templates/basic/src/pages/index.html
+++ b/templates/basic/src/pages/index.html
@@ -25,7 +25,7 @@
     <main>
       <h2>Welcome to {{ project.name }}</h2>
       <p>
-        Here's a vanilla custom element: <vanilla-hello-world/>
+        Here's a vanilla custom element: <my-hello-world />
       </p>
       <code-block language="js">
 class HelloWorld extends HTMLElement {