Simple. Fast. Web Components.
简单
跳过模板代码
基于 Web Components 标准，Lit 只添加了让你快乐和高效所需的一切：响应性、声明式模板以及一些精心设计功能，减少模板代码并简化你的工作。每个 Lit 特性都经过精心设计，充分考虑了 Web 平台的发展趋势。
快速
体积小，更新即时
Lit 的大小约为 5 KB（经过压缩和最小化），帮助你保持 较小的包体积和较短的加载时间。渲染速度极快，因为 Lit 在更新时 只触及 UI 中动态变化的部分——无需重建虚拟树并与 DOM 进行比较。
Web Components
互操作性与面向未来
每个 Lit 组件都是原生 Web 组件，具有互操作性的超能力。Web Components 可以在任何使用 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 Components 原生受浏览器支持，它们是完美的解决方案 —— 而 Lit 使它们变得易于构建。
设计系统
设计系统帮助你创建一致优秀且符合品牌的体验。但如果你的组织使用多种框架怎么办？ 使用 Lit，你可以构建一套适用于每个团队的组件。
网站和应用
使用 Lit 组件逐步增强静态网站，或构建完整的应用程序。 通过拥抱 Web Components，Lit 最小化锁定并促进可维护性： 一次更新或迁移一个组件，而不会中断产品开发。
探索 Lit
与 Lit 和 Web Components 社区建立联系
了解最新版本，学习更多关于如何使用 Web Components 的知识， 并与我们的团队分享项目和反馈。所有社区参与都遵循 Lit 的行为准则 —— 彼此友善相待！