简单。 快速。 Web Components。
简单
跳过模板
Lit 基于 Web Components 标准，仅添加您需要的东西来提高效率：响应性、声明式模板和一些精心设计的特性，以减少模板代码并简化您的工作。 Lit 的每个功能都是经过精心设计的，考虑到 Web 平台的演变。
快速
体积小，更新即时
Lit 的体积仅为 5 KB 左右（压缩版），有助于保持包体积小，加载时间短。 渲染速度非常快，因为 Lit 在更新时只触及 UI 的动态部分——无需重建虚拟树并与 DOM 进行比较。
Web Components
互操作性 & 面向未来
每个 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>`; }}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`<p>Hello, ${this.name}!</p>`; }}customElements.define('simple-greeting', SimpleGreeting);<simple-greeting name="World"></simple-greeting>自定义元素
Lit 组件是标准的 自定义元素，因此浏览器会像对待内置元素一样对待它们。 在手写 HTML 或框架代码中使用它们，从 CMS 或静态站点构建器中输出它们，甚至在 JavaScript 中创建实例——它们都能正常工作！
作用域样式
Lit 默认情况下会对您的样式使用 Shadow DOM 进行作用域限定。 这可以使您的 CSS 选择器保持简单，并确保您的组件样式不会影响——也不会被页面上的任何其他样式影响。
响应式属性
声明 响应式属性 来模拟组件的 API 和内部状态。 每当响应式属性（或相应的 HTML 属性）发生变化时，Lit 组件都会高效地重新渲染。
声明式模板
Lit 模板基于 带标签的模板字面量，简单、表达能力强且速度快，具有带有原生 JavaScript 表达式的 HTML 标记。 无需学习自定义语法，无需编译。
使用 Lit 构建任何内容
可共享组件
需要提供交互式内容或功能，这些内容或功能可以放到任何网站上，构建在任何堆栈上？ 由于 Web 组件得到浏览器的原生支持，因此它们是完美的解决方案——而 Lit 使它们易于构建。
设计系统
设计系统有助于创建始终如一地出色且符合品牌形象的体验。 但是，如果您的组织使用多个框架，该怎么办？ 使用 Lit，您可以构建一套适用于所有团队的组件。
网站和应用程序
使用 Lit 组件逐步增强静态网站，或构建整个应用程序。 通过采用 Web Components，Lit 最小化了锁定并促进了可维护性：可以一次更新或迁移一个组件，而不会影响产品开发。
探索 Lit
与 Lit 和 Web Components 社区建立联系
随时了解新版本，了解更多有关如何使用 Web Components 的信息，并与我们的团队分享项目和反馈。 所有社区参与均受 Lit 的行为准则约束——彼此友善！