3 ms·
The downside there is you’re heavily relying on strings, which feels a bit weird for things like event handlers, which would either have to inline the function
by jsf01 6y ago
The downside there is you’re heavily relying on strings, which feels a bit weird for things like event handlers, which would either have to inline the function as a string or do some magic behind the scenes. The editor is also going to be less helpful in figuring out your intent when using a string-only templating system.
- fiddlerwoaroof 6y agoI don’t think it’s actually strings: the tag gets the value of the expression in ${}s and can return whatever sort of object it wants. As I understand it, it basically creates HtmlTemplate objects or some other kind of Fragment: the strings are only there for specifying the tags and static attributes. See “tagged templates” here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- spankalee 6y agolit-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); } }