lit Web组件：构建快速、轻量级的 Web 组件

Lit 是一个简单的库，用于构建快速、轻量级的 Web 组件。
Lit 的核心是一个杀手级模板：提供一些组件基类，包括：提供反应reactive状态、作用域样式和一个小巧、快速且富有表现力的声明性模板系统。
Lit 建立在 Web Components 标准之上，添加了让您快乐和高效所需的一切：反应性、声明性模板和一些周到的功能，以减少样板并让您的工作更轻松。每个 Lit 功能都经过精心设计，考虑到了 Web 平台的演变。
约为 5 KB（缩小和压缩），Lit 有助于保持包大小小和加载时间短。渲染速度非常快，因为 Lit 在更新时只接触 UI 的动态部分——无需重建虚拟树并将其与 DOM 进行比较。
每个 Lit 组件都是本机 Web 组件，具有互操作性的超能力。Web 组件可以在您使用 HTML 的任何地方使用，可以使用任何框架或根本不使用。这使 Lit 成为构建可共享组件、设计系统或可维护、面向未来的站点和应用程序的理想选择。

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`<p>Hello, ${this.name}!</p>`;
  }
}

自定义元素：

@customElement

Lit 组件是标准的自定义元素，因此浏览器将它们视为内置元素。在手写的 HTML 或框架代码中使用它们，从您的 CMS 或静态站点构建器输出它们，甚至在 JavaScript 中创建实例——它们只是工作！

范围样式：
static styles = css`p { color: blue }`;

默认情况下，Lit 使用Shadow DOM限定您的样式。这使您的 CSS 选择器保持简单，并确保您的组件的样式不会影响 - 也不会受到 - 页面上的任何其他样式的影响。

反应属性：
@property()

声明反应性属性以对组件的 API 和内部状态进行建模。每当反应性属性（或相应的 HTML 属性）发生变化时，Lit 组件都会有效地重新渲染。

声明式模板：

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

Lit 模板基于标记的模板文字，简单、富有表现力且快速，具有内联原生 JavaScript 表达式的 HTML 标记。无需学习自定义语法，无需编译。