Polymer Lit-Element#

That's really close, but still - Polymer is a bit to restrictive concerning TypeScript. These guys over their like Babel to much.

Components#

See the entry example in Polymer form their docs:

import { LitElement, html, property, customElement } from 'lit-element';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

// Usage somewhere else in HTML
<simple-greeting name="Everyone"></simple-greeting>

See the same in @nyaf:

import { BaseComponent, CustomElement, Properties } from '@nyaf/lib';

@CustomElement('simple-greeting')
@Properties({ name = 'World' });
export class SimpleGreeting extends BaseComponent<{ name: string }> {

  render() {
    return <p>Hello, {this.data.name}!</p>;
  }
}

// Usage somewhere else in HTML
<simple-greeting name="Everyone"></simple-greeting>

As in React, Polymer's lit-element doesn't has any template features.