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