Google Lit Web Components library All In One

Lit is a simple library for building fast, lightweight web components.

Lit 是一个简单的库，用于构建快速、轻量级的 Web 组件。

https://lit.dev/

https://github.com/lit/lit/

demo

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    const result = html`
Hello, ${this.name}!
`;
    console.log('result =', result);
    // {strings, values, _$litType$}
    return result; 
  }
}
customElements.define('simple-greeting', SimpleGreeting);

https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy5qcyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUdyZWV0aW5nIGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIHN0YXRpYyBzdHlsZXMgPSBjc3NgcCB7IGNvbG9yOiBibHVlIH1gO1xuXG4gIHN0YXRpYyBwcm9wZXJ0aWVzID0ge1xuICAgIG5hbWU6IHt0eXBlOiBTdHJpbmd9LFxuICB9O1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5uYW1lID0gJ1NvbWVib2R5JztcbiAgfVxuXG4gIHJlbmRlcigpIHtcbiAgICBjb25zdCByZXN1bHQgPSBodG1sYDxwPkhlbGxvLCAke3RoaXMubmFtZX0hPC9wPmA7XG4gICAgY29uc29sZS5sb2coJ3Jlc3VsdCA9JywgcmVzdWx0KTtcbiAgICAvLyB7c3RyaW5ncywgdmFsdWVzLCBfJGxpdFR5cGUkfVxuICAgIHJldHVybiByZXN1bHQ7IFxuICB9XG59XG5jdXN0b21FbGVtZW50cy5kZWZpbmUoJ3NpbXBsZS1ncmVldGluZycsIFNpbXBsZUdyZWV0aW5nKTtcbiJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9zaW1wbGUtZ3JlZXRpbmcuanNcIj48L3NjcmlwdD5cbjwvaGVhZD5cbjxib2R5PlxuICA8c2ltcGxlLWdyZWV0aW5nIG5hbWU9XCJXb3JsZFwiPjwvc2ltcGxlLWdyZWV0aW5nPlxuPC9ib2R5PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjIuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMS4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4yLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ

TypeScript & @decorators

TypeScript 修饰器实现原理 / TypeScript @decorator under the hood

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

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

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`
Hello, ${this.name}!
`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

Web Components

1. Custom elements
   A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.

2. Shadow DOM
   A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality.
   In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.

3. HTML templates
   The