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`;
}