refactor(template): different prop access examples

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

templates/basic/src/components/my-hello-world.js

@@ -3,18 +3,20 @@
  * @see https://ayco.io/n/web-component-base
  */
 class MyHelloWorld extends WebComponent {
+  // initialize prop
+  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;
-    this.dataset.name = this.dataset.name ?? 'World';
     this.onclick = () => this.dataset.name = `Clicked ${++count}x`
   }
 
   // give readonly template
   get template() {
-    return `<button style="cursor:pointer">Hello ${this.dataset.name}!</button>`;
+    return `<button style="cursor:pointer">Hello ${this.dataName}!</button>`;
   }
 }

templates/basic/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`;
   }