22 lines
598 B
JavaScript
22 lines
598 B
JavaScript
class HelloWorld extends HTMLElement {
|
|
static get observedAttributes() {
|
|
return ["my-name"];
|
|
}
|
|
|
|
connectedCallback() {
|
|
let count = 0;
|
|
const currentName = this.getAttribute("my-name");
|
|
|
|
if (!currentName) {
|
|
this.setAttribute("my-name", "World");
|
|
}
|
|
|
|
this.onclick = () => this.setAttribute("my-name", `Clicked ${++count}x`);
|
|
}
|
|
|
|
attributeChangedCallback(property, previousValue, currentValue) {
|
|
if (property === "my-name" && previousValue !== currentValue) {
|
|
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
|
|
}
|
|
}
|
|
}
|