19 lines
544 B
JavaScript
19 lines
544 B
JavaScript
/**
|
|
* Custom element using a minimal Web Component Base class
|
|
* @see https://ayco.io/n/web-component-base
|
|
*/
|
|
class MyHelloWorld extends WebComponent {
|
|
// tell browser which props to cause render
|
|
static properties = ["my-name"];
|
|
|
|
// Triggered when the component is connected to the DOM
|
|
onInit() {
|
|
let count = 0;
|
|
this.onclick = () => this.props.myName = `Clicked ${++count}x`
|
|
}
|
|
|
|
// give readonly template
|
|
get template() {
|
|
return `<button style="cursor:pointer">Hello ${this.props.myName ?? 'World'}!</button>`;
|
|
}
|
|
}
|