3 ms·
LitElement is written in TypeScript so has great typings for all APIs, and TypeScript (and Babel 7) decorators. There's also a template type-checker CLI, compil
by spankalee 6y ago
LitElement is written in TypeScript so has great typings for all APIs, and TypeScript (and Babel 7) decorators. There's also a template type-checker CLI, compiler plugin, and VS Code extension: https://github.com/runem/lit-analyzer https://github.com/runem/lit-analyzer
The big difference from Fast is that LitElement's render() method is an instance method, so it can access any state with `this.` and any properties and methods it uses can be overridden. But it's all just as declarative:
import { LitElement, customElement, property, html } from 'lit-element';
@customElement('hello-world')
export class HelloWorldElement extends LitElement {
@property()
name: string = 'World';
render() {
return html`
<h1>Hello ${this.name}</h1>
`;
}
}
We have decorators for reactive properties, registering elements, shadow root queries, and adding event listener options to methods: https://lit-element.polymer-project.org/guide/decorators https://lit-element.polymer-project.org/guide/decorators
- megaman821 6y agoYeah, LitElement definitely has a cleaner render template. How would one do a computed property in LitElement?
- spankalee 6y agoYou really don't need any special for a computed property. I'd start with a simple getter: class MyElement extends LitElement { @property() value: number = 42; get valueSquared() { return this.value ** 2; } } If the value is expensive to compute you can memoize it in the getter, or set it in update.