diff --git a/templates/basic/src/components/my-hello-world.js b/templates/basic/src/components/my-hello-world.js index 663e4ea..ae55f22 100644 --- a/templates/basic/src/components/my-hello-world.js +++ b/templates/basic/src/components/my-hello-world.js @@ -3,18 +3,20 @@ * @see https://ayco.io/n/web-component-base */ class MyHelloWorld extends WebComponent { + // initialize prop + dataName = 'World'; + // tell browser which props to cause render static properties = ["data-name"]; // Triggered when the component is connected to the DOM onInit() { let count = 0; - this.dataset.name = this.dataset.name ?? 'World'; this.onclick = () => this.dataset.name = `Clicked ${++count}x` } // give readonly template get template() { - return ``; + return ``; } } diff --git a/templates/basic/src/components/vanilla-hello-world.js b/templates/basic/src/components/vanilla-hello-world.js index e2cea68..3632152 100644 --- a/templates/basic/src/components/vanilla-hello-world.js +++ b/templates/basic/src/components/vanilla-hello-world.js @@ -5,7 +5,11 @@ class HelloWorld extends HTMLElement { connectedCallback() { let count = 0; - this.dataset.name = this.dataset.name ?? 'World'; + + if (!('name' in this.dataset)) { + this.dataset.name = 'World'; + } + this.onclick = () => this.dataset.name = `Clicked ${++count}x`; }