3 ms·
lit-html is not a "string only" template system. Because tagged literals can contain JavaScript expressions we process many other data types and handle them app
by spankalee 6y ago
lit-html is not a "string only" template system. Because tagged literals can contain JavaScript expressions we process many other data types and handle them appropriately.
For event handlers, only the event name is in the string. The handler function is passed directly in and we add it to elements with addEventListener().
The only "magic" is that we wrap the user's handler call it with the host component as the `this` value so that you don't have to create closures like in Reach. You can just do:
class MyElement extends LitElement {
render() {
return html`<button @click=${this._onClick}`>Click Ma</button>
}
_onClick(e) {
console.log('this is', this);
}
}