feat: explicit parallel universes

src/components/hello-world.js

@@ -1,11 +1,11 @@
 class HelloWorld extends HTMLElement {
-  static observedAttributes = ["name"];
+  static get observedAttributes() {
+    return ["name"];
+  }
 
   connectedCallback() {
-    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");
@@ -13,7 +13,12 @@ class HelloWorld extends HTMLElement {
 
   attributeChangedCallback(property, previousValue, currentValue) {
     if (previousValue !== currentValue) {
-      this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
+      this[property] = currentValue;
+      this.render();
     }
   }
+
+  render() {
+    this.innerHTML = `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+  }
 }

src/components/my-hello-world.js

@@ -2,19 +2,13 @@ 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>`;
   }