Lit 是什么？

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

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

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

关于 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 支持（代码补全、linting 等）和生产工具（本地化、模板压缩等）都随时可用。

正如我们已经指出的，Lit 是构建各种 Web UI 的绝佳选择，将基于互操作性的 Web 组件优势与现代、符合人体工程学的开发者体验结合在一起。

Lit 还具有以下特点：

• 简单。 建立在 Web Components 标准之上，Lit 只添加了你需要的东西，让你开心且高效：响应式、声明式模板和一些经过深思熟虑的功能，以减少样板代码并让你的工作更轻松。
• 快速。 更新很快，因为 Lit 会跟踪你 UI 的动态部分，并且仅在底层状态更改时更新这些部分——无需重建整个虚拟树并将其与 DOM 的当前状态进行比较。
• 轻量级。 大小约为 5 KB（经过压缩和最小化），Lit 有助于保持包大小小和加载时间短。

Lit 背后的团队从一开始就参与了 Web Components。我们帮助 Google 维护数万个组件，提供全面的 Web 组件 polyfill，并深入参与标准和社区工作。

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

• 入门：为开始使用 Lit 进行开发做好准备。
• 组件：了解 Lit 组件模型。
• 模板：使用 lit-html 语法编写模板。
• 代码组织：编写可重用、可维护的代码。