ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(templates): exact behavior for examples

Browse source 
- made my-hello-world & vanilla-hello-world have the exact same behavior
This commit is contained in:
Ayo 2023-11-18 01:46:37 +01:00
parent 84738d6a63
commit 750a30714d
1 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
templates/basic/src/components/vanilla-hello-world.js
View file

@ -1,20 +1,21 @@
class HelloWorld extends HTMLElement { class HelloWorld extends HTMLElement {
static get observedAttributes() { static get observedAttributes() {
return ["data-name"]; return ["my-name"];
} }
connectedCallback() { connectedCallback() {
let count = 0; let count = 0;
const currentName = this.getAttribute('my-name');
if (!('name' in this.dataset)) { if (!currentName) {
this.dataset.name = 'World'; 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) { 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>`; this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
} }
} }