From 5d4702b1a6cb76af54ecd1bf88bd7e10959352d9 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Fri, 17 Nov 2023 20:53:41 +0100
Subject: [PATCH] refactor(site): different prop access examples

- HTMLElement.dataset for vanilla
- WebComponent camelCase counterpart for custom base
---
 site/src/components/my-hello-world.js      | 5 +++--
 site/src/components/vanilla-hello-world.js | 6 +++++-
 site/src/pages/index.html                  | 3 +--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/site/src/components/my-hello-world.js b/site/src/components/my-hello-world.js
index d9d01c6..3f1b822 100644
--- a/site/src/components/my-hello-world.js
+++ b/site/src/components/my-hello-world.js
@@ -3,15 +3,16 @@
  * @see https://ayco.io/n/web-component-base
  */
 class HelloWorld extends WebComponent {
+  dataName = 'World';
+
   static properties = ["data-name"];
 
   onInit() {
     let count = 0;
-    this.dataset.name = this.dataset.name ?? 'World';
     this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
   }
 
   get template() {
-    return `<button style="cursor:pointer">Hello ${this.dataset.name}!</button>`;
+    return `<button style="cursor:pointer">Hello ${this.dataName}!</button>`;
   }
 }
diff --git a/site/src/components/vanilla-hello-world.js b/site/src/components/vanilla-hello-world.js
index e2cea68..262dea7 100644
--- a/site/src/components/vanilla-hello-world.js
+++ b/site/src/components/vanilla-hello-world.js
@@ -5,7 +5,11 @@ class HelloWorld extends HTMLElement {
 
   connectedCallback() {
     let count = 0;
-    this.dataset.name = this.dataset.name ?? 'World';
+    
+    if (!('name' in this.dataset)) {
+      this.dataset.name = 'World'
+    }
+
     this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
   }
 
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index f95dea7..d7fb641 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -33,8 +33,7 @@
         </p>
         <code-block>npm create <strong style="color: var(--color-blue)">mcfly</strong>@latest</code-block>
         <p>
-          Here's a sample interactive custom element:
-          <vanilla-hello-world></vanilla-hello-world>
+          Here's a sample interactive custom element: <vanilla-hello-world />
         </p>
         <p>
           Start at the very basic of writing HTML files and enhance with