diff --git a/src/components/hello-world.js b/src/components/hello-world.js index a11d43b..8501468 100644 --- a/src/components/hello-world.js +++ b/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 = ``; + this[property] = currentValue; + this.render(); } } + + render() { + this.innerHTML = ``; + } } diff --git a/src/components/my-hello-world.js b/src/components/my-hello-world.js index 1260729..dc2ab43 100644 --- a/src/components/my-hello-world.js +++ b/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 ``; }