chore: better example with explanations

demo/HelloWorld.mjs

@@ -2,7 +2,7 @@
 import WebComponent from "../src/index.js";
 
 export class HelloWorld extends WebComponent {
-  name = "World";
+  dataName = "World";
   emotion = "excited";
 
   static properties = ["data-name", "emotion"];

src/WebComponent.js

@@ -8,11 +8,17 @@
  * import WebComponent from "https://unpkg.com/web-component-base/index.js";
  *
  * class HelloWorld extends WebComponent {
+ *   // initialize prop
+ *   dataName = 'World';
+ *
+ *   // tell the browser which attributes to cause a render
  *   static properties = ["data-name", "emotion"];
  *
+ *   // give the component a readonly template
+ *   // note: props have kebab-case & camelCase counterparts
  *   get template() {
  *     return `
- *         <h1>Hello ${this.dataName || 'World'}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
+ *         <h1>Hello ${this.dataName}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
  *   }
  * }
  *