3 ms·

It looks like LitElement but more TypeScript first. The decorators do make it a bit more approachable for me.

• 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 ago
    Yeah, LitElement definitely has a cleaner render template. How would one do a computed property in LitElement?
    • spankalee 6y ago
      You 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.