refactor hello-world component
This commit is contained in:
parent
a7f3dfaf8e
commit
ad359a60ef
1 changed files with 7 additions and 6 deletions
|
@ -2,17 +2,18 @@
|
||||||
import WebComponent from "../src/WebComponent.js";
|
import WebComponent from "../src/WebComponent.js";
|
||||||
|
|
||||||
export class HelloWorld extends WebComponent {
|
export class HelloWorld extends WebComponent {
|
||||||
static properties = ["my-name", "emotion"];
|
static properties = ["count", "emotion"];
|
||||||
|
|
||||||
onInit() {
|
onInit() {
|
||||||
let count = 0;
|
this.props.count = 0;
|
||||||
this.onclick = () => (this.props.myName = `Clicked ${++count}`);
|
this.onclick = () => ++this.props.count;
|
||||||
}
|
}
|
||||||
|
|
||||||
get template() {
|
get template() {
|
||||||
return `<button id="btn">Hello ${this.props.myName ?? "World"}${
|
const label = this.props.count ? `Clicked ${this.props.count}` : "World";
|
||||||
this.props.emotion === "sad" ? ". 😭" : "! 🙌"
|
const emote = this.props.emotion === "sad" ? ". 😭" : "! 🙌";
|
||||||
}</button>`;
|
|
||||||
|
return `<button id="btn">Hello ${label}${emote}</button>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue