diff --git a/site/src/components/vanilla-hello-world.js b/site/src/components/vanilla-hello-world.js
index 262dea7..69f69c3 100644
--- a/site/src/components/vanilla-hello-world.js
+++ b/site/src/components/vanilla-hello-world.js
@@ -1,20 +1,21 @@
class HelloWorld extends HTMLElement {
static get observedAttributes() {
- return ["data-name"];
+ return ["my-name"];
}
connectedCallback() {
let count = 0;
-
- if (!('name' in this.dataset)) {
- this.dataset.name = 'World'
+ const currentName = this.getAttribute('my-name');
+
+ if (!currentName) {
+ this.setAttribute('my-name', 'World')
}
- this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
+ this.onclick = () => this.setAttribute("my-name", `Clicked ${++count}x`);
}
attributeChangedCallback(property, previousValue, currentValue) {
- if (property === "data-name" && previousValue !== currentValue) {
+ if (property === "my-name" && previousValue !== currentValue) {
this.innerHTML = ``;
}
}
diff --git a/templates/basic/src/pages/index.html b/templates/basic/src/pages/index.html
index ad9d371..763c604 100644
--- a/templates/basic/src/pages/index.html
+++ b/templates/basic/src/pages/index.html
@@ -30,18 +30,24 @@
class HelloWorld extends HTMLElement {
static get observedAttributes() {
- return ["data-name"];
+ return ["my-name"];
}
connectedCallback() {
let count = 0;
+ const currentName = this.getAttribute("my-name");
+
+ if (!currentName) {
+ this.setAttribute("my-name", "World")
+ }
+
this.onclick = () => {
- this.setAttribute("data-name", `Clicked ${++count}x`);
+ this.setAttribute("my-name", `Clicked ${++count}x`);
};
}
attributeChangedCallback(property, previousValue, currentValue) {
- if (property === "data-name" && previousValue !== currentValue) {
+ if (property === "my-name" && previousValue !== currentValue) {
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
}
}