什么是 Lit？

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

Lit 的核心是一个简化模板的组件基类，它提供响应式状态、作用域样式和一个声明式模板系统，该系统小巧、快速且富有表现力。

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

关于 Lit 需要知道的第一件事是，每个 Lit 组件都是一个标准的 Web 组件。Web 组件拥有互操作性的超能力：它们由浏览器原生支持，可以在任何 HTML 环境中使用，无论使用什么框架或根本不使用框架。

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

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

当然，你也可以使用 Lit 组件构建高度交互式、功能丰富的应用程序，就像使用 React 或 Vue 等框架一样。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 组件标准的基础上，Lit 只添加了你需要的功能来让你感到高兴和高效：响应式、声明式模板和一些经过深思熟虑的功能，可以减少样板代码，让你的工作更轻松。
• 快速。更新速度很快，因为 Lit 会跟踪 UI 的动态部分，只在底层状态发生变化时才更新这些部分，不需要重建整个虚拟树并与 DOM 的当前状态进行比较。
• 轻量级。Lit 的大小约为 5 KB（压缩并缩小），有助于保持包体积小巧，加载时间短。

Lit 背后的团队从一开始就参与了 Web 组件。我们帮助谷歌维护数万个组件，提供了一套完整的 Web 组件垫片，并深入参与标准和社区工作。

每个 Lit 特性都是经过精心设计的，以适应 Web 平台的演进；我们的目标是帮助你充分利用平台今天提供的功能，同时编写能够从未来增强中获益的代码。

• 入门：开始使用 Lit 开发。
• 组件：了解 Lit 组件模型。
• 模板：使用 lit-html 语法编写模板。
• 代码组织：编写可重用、易于维护的代码。

编辑此页面