Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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


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

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


Yeah, LitElement definitely has a cleaner render template. How would one do a computed property in LitElement?


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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: