vanilla example

src/components/hello-world.js

@@ -1,7 +1,7 @@
-class HelloWorld extends WebComponent {
-  static properties = ["name"];
+class HelloWorld extends HTMLElement {
+  static observedAttributes = ["name"];
 
-  onInit() {
+  connectedCallback() {
     console.log(`Greeting for ${this.name} initialized`);
     let count = 0;
     this.onclick = () => {
@@ -11,11 +11,10 @@ class HelloWorld extends WebComponent {
     this.setAttribute("title", "Click me please");
   }
 
-  onChanges(changes) {
-    console.log(changes);
-  }
-
-  get template() {
-    return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+  attributeChangedCallback(property, previousValue, currentValue) {
+    if (previousValue !== currentValue) {
+      this[property] = currentValue;
+      this.innerHTML = `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+    }
   }
 }

src/components/my-hello-world.js

@@ -0,0 +1,21 @@
+class HelloWorld extends WebComponent {
+  static properties = ["name"];
+
+  onInit() {
+    console.log(`Greeting for ${this.name} initialized`);
+    let count = 0;
+    this.onclick = () => {
+      console.log("Clicked!");
+      this.setAttribute("name", `Clicked ${++count}x`);
+    };
+    this.setAttribute("title", "Click me please");
+  }
+
+  onChanges(changes) {
+    console.log(changes);
+  }
+
+  get template() {
+    return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+  }
+}

src/pages/index.html

@@ -14,21 +14,24 @@
       </p>
       <code-block class="language-js line-numbers" data-line="2">
         <pre>
-class HelloWorld extends WebComponent {
-  static properties = ["name"];
+class HelloWorld extends HTMLElement {
+  static observedAttributes = ["name"];
 
-  onInit() {
+  connectedCallback() {
     let count = 0;
     this.onclick = () => {
       this.setAttribute("name", `Clicked ${++count}x`);
     };
+    this.setAttribute("title", "Click me please");
   }
 
-  get template() {
-    return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+  attributeChangedCallback(property, previousValue, currentValue) {
+    if (previousValue !== currentValue) {
+      this[property] = currentValue;
+      this.innerHTML = `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+    }
   }
-}
-</pre>
+}</pre>
       </code-block>
       <p>
         Start at the very basic of writing HTML files and enhance with standard