Lit 是什么？

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

Lit 的核心是一个消除样板代码的组件基类，它提供了响应式状态、作用域样式以及一个体积小巧、运行迅速且富有表现力的声明式模板系统。

你几乎可以用 Lit 构建任何类型的 Web UI！

关于 Lit，首先要了解的是每个 Lit 组件都是标准的 Web 组件。Web 组件拥有互操作性的超能力：原生浏览器支持，Web 组件可以在任何 HTML 环境中使用，兼容任何框架，也可以不使用任何框架。

这使得 Lit 成为开发可共享组件或设计系统的理想选择。Lit 组件可以在多个应用和站点中使用，即使这些应用和站点基于不同的前端技术栈构建。使用 Lit 组件的站点开发者不需要编写甚至看到任何 Lit 代码；他们可以像使用内置 HTML 元素一样使用这些组件。

Lit 也非常适合渐进增强基础 HTML 站点。浏览器会识别你标记中的 Lit 组件并自动初始化它们——无论你的站点是手工编写的、通过 CMS 管理的、使用服务端框架构建的，还是由 Jekyll 或 eleventy 等工具生成的。

当然，你也可以像使用 React 或 Vue 等框架一样，用 Lit 组件构建高度交互、功能丰富的应用。Lit 的功能和开发体验与这些流行替代方案相当，但 Lit 通过拥抱浏览器的原生组件模型来最小化锁定、最大化灵活性并提升可维护性。

当你用 Lit 构建应用时，可以轻松混入"原生" Web 组件或其他库构建的 Web 组件。你甚至可以逐个组件地升级到 Lit 的新大版本——或迁移到另一个库——而不会中断产品开发。

如果你做过任何现代的、基于组件的 Web 开发，你应该会对 Lit 感到非常熟悉。即使你之前没有使用过组件开发，我们也认为你会发现 Lit 非常容易上手。

每个 Lit 组件都是一个自包含的 UI 单元，由更小的构建块组装而成：标准 HTML 元素和其他 Web 组件。反过来，每个 Lit 组件本身也是一个构建块，可以在 HTML 文档、另一个 Web 组件或框架组件中使用——用于构建更大、更复杂的界面。

下面是一个小巧但有一定复杂度的组件（一个倒计时器），它展示了 Lit 代码的样子并突出了几个关键特性：

一些值得注意的地方：

• Lit 的主要特性是 LitElement 基类，它是原生 HTMLElement 的便捷且通用的扩展。你通过继承它来定义自己的组件。
• Lit 的富有表现力的声明式模板（利用 JavaScript 标签模板字符串）使描述组件的渲染方式变得简单。
• 响应式属性代表组件的公共 API 和/或内部状态；每当响应式属性发生变化时，你的组件会自动重新渲染。
• 样式默认是作用域隔离的，保持你的 CSS 选择器简洁，并确保组件的样式不会污染（或被污染）周围的上下文。
• Lit 在原生 JavaScript 中表现出色，你也可以使用 TypeScript 通过装饰器和类型声明来获得更好的开发体验。

Lit 在开发期间不需要编译或构建，因此如果你愿意，它几乎可以无工具使用。一流的 IDE 支持（代码补全、代码检查等）和生产环境工具链（本地化、模板压缩等）都可随时获取。

正如我们之前提到的，Lit 是构建各类 Web UI 的绝佳选择，它将 Web 组件基于互操作的优势与现代、符合人体工学的开发体验相结合。

Lit 还具有以下特点：

• 简单。 基于 Web Components 标准构建，Lit 只添加了你需要的东西来让你高效工作：响应式、声明式模板以及一些精心设计的特性来减少样板代码，让你的工作更轻松。
• 快速。 更新速度很快，因为 Lit 会跟踪 UI 的动态部分，只在底层状态变化时更新这些部分——无需重建整个虚拟 DOM 树并与当前 DOM 状态进行差异比较。
• 轻量。 体积仅约 5 KB（压缩后），Lit 有助于保持较小的包体积和较短的加载时间。

Lit 背后的团队从第一天起就参与了 Web Components 的开发。我们帮助 Google 维护数以万计的组件，提供全面的 Web Components polyfill 集合，并深度参与标准和社区工作。

Lit 的每一个特性都是在考虑 Web 平台演进的情况下精心设计的；我们的目标是帮助你充分利用平台今天所提供的能力，同时编写的代码能够从未来的增强中受益。

• 快速开始：设置环境并开始使用 Lit 开发。
• 组件：了解 Lit 组件模型。
• 模板：使用 lit-html 语法编写模板。
• 代码组织：编写可复用、可维护的代码。