From d3573ec5b2600c5c3adfa84a88df0e13ccb84305 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 12 Nov 2023 16:06:47 +0100
Subject: [PATCH] chore: better example with explanations

---
 demo/HelloWorld.mjs | 2 +-
 src/WebComponent.js | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/demo/HelloWorld.mjs b/demo/HelloWorld.mjs
index 7b1a399..3eae46d 100644
--- a/demo/HelloWorld.mjs
+++ b/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"];
diff --git a/src/WebComponent.js b/src/WebComponent.js
index 7405bb4..2a32984 100644
--- a/src/WebComponent.js
+++ b/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>`;
  *   }
  * }
  *