refactor(site): different prop access examples

- HTMLElement.dataset for vanilla
- WebComponent camelCase counterpart for custom base

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

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

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:
+          Here's a sample interactive custom element: <vanilla-hello-world />
-          <vanilla-hello-world></vanilla-hello-world>
         </p>
         <p>
           Start at the very basic of writing HTML files and enhance with