34 lines
746 B
JavaScript
34 lines
746 B
JavaScript
// @ts-check
|
|
import { WebComponent } from "./WebComponent.mjs";
|
|
const emotionPostfix = {
|
|
excited: "!",
|
|
sad: " :(",
|
|
};
|
|
const emotionColor = {
|
|
excited: "green",
|
|
sad: "red",
|
|
};
|
|
|
|
/**
|
|
* Component to greet a person
|
|
* and display sentiment toward web components
|
|
*/
|
|
export class HelloWorld extends WebComponent {
|
|
name = "World";
|
|
emotion = "excited";
|
|
|
|
|
|
static get observedAttributes() {
|
|
return ["name", "emotion"];
|
|
}
|
|
|
|
get template() {
|
|
return `
|
|
<h1>Hello ${this.name}${emotionPostfix[this.emotion]}</h1>
|
|
<h2>How do you feel about web components:
|
|
<span style="color:${emotionColor[this.emotion]}">
|
|
${this.emotion.toUpperCase()}
|
|
</span>
|
|
</h2>`;
|
|
}
|
|
}
|