今天，我们很高兴地宣布，我们的两个新一代 Web 开发库 lit-html 和 LitElement 已发布首个稳定版。
lit-html 是一个体积小、速度快且富有表现力的 HTML 模板库。LitElement 是一个简单的基础类，用于使用 lit-html 模板创建 Web 组件。
如果您一直在关注这些项目，可能已经了解 lit-html 和 LitElement 的相关信息（您可以根据需要跳到最后）。如果您刚接触 lit-html 和 LitElement，请继续阅读以了解概览。
lit-html：一个小巧且快速的 HTML 模板库
lit-html 是一个体积小（仅 3 千多字节，已捆绑、缩减和压缩）且快速的 JavaScript 库，适用于 HTML 模板。lit-html 与函数式编程方法非常契合，可让您以声明方式将应用的界面表示为其状态的函数。
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
呈现 lit-html 模板非常简单：
render(myTemplate('Ada'), document.body);
重新渲染模板只会更新已更改的数据：
render(myTemplate('Grace'), document.body);
lit-html 高效、可表达且可扩展：
- 高效。lit-html 的速度快如闪电。当数据发生变化时，lit-html 无需执行任何差异化操作；而是会记住您在模板中插入表达式的位置，并仅更新这些动态部分。
- 富有表现力。lit-html 可让您充分利用 JavaScript、声明式界面和函数式编程模式。lit-html 模板中的表达式只是 JavaScript，因此您无需学习自定义语法，并且可以使用该语言的所有表达能力。lit-html 本身支持多种值：字符串、DOM 节点、数组等。模板本身就是可计算、传递给函数和从函数传递的值，以及可嵌套的值。
- 可扩展：lit-html 还可自定义和扩展，是您自己的模板构建套件。指令可自定义值的处理方式，支持异步值、高效的键值重复、错误边界等。lit-html 包含多个可供使用的指令，并支持轻松定义您自己的指令。
许多库和项目已纳入 lit-html。您可以在 GitHub 上的 awesome-lit-html 代码库中找到其中一些库的列表。
如果您只需要使用模板，可以立即参阅 lit-html 文档。如果您想构建要在应用中使用的组件或与团队共享的组件，请继续阅读以了解详情。
LitElement：轻量级 Web 组件基类
LitElement 是一个轻量级基类，可让您比以往更轻松地构建和共享 Web 组件。
LitElement 使用 lit-html 呈现组件，并添加了 API 来声明响应式属性和属性。当元素的属性发生变化时，元素会自动更新。并且更新速度快，无需进行差异比较。
下面是一个使用 TypeScript 编写的简单 LitElement 组件：
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
（我们还提供了出色的原生 JavaScript API。）
这样便会创建一个元素，您可以在使用常规 HTML 元素的任何位置使用它：
<name-tag name="Ida"></name-tag>
如果您已经在使用 Web 组件，那么您会很高兴地得知，Chrome、Safari 和 Firefox 现在原生支持 Web 组件。Edge 支持即将推出，只有旧版浏览器需要使用 polyfill。
如果您刚接触 Web 组件，不妨试一试！借助 Web 组件，您可以以与其他库、工具和框架互操作的方式扩展 HTML。因此，它们非常适合在大型组织内共享界面元素、发布可在 Web 上的任何位置使用的组件，或构建 Material Design 等界面设计系统。
您可以在使用 HTML 的任何位置使用自定义元素：在主要文档、CMS、Markdown 中，或在使用框架（例如 React 和 Vue）构建的视图中。您还可以将 LitElement 组件与其他 Web 组件搭配使用，无论这些组件是使用纯 Web 技术编写的，还是借助 Salesforce Lightning Web 组件、Ionic 的 Stencil、SkateJS 或 Polymer 库等工具制作的。
开始使用
想试用 lit-html 和 LitElement？不妨从 LitElement 教程入手：
如果您有兴趣单独使用 lit-html 或将 lit-html 模板集成到其他项目中，请参阅 lit-html 文档：
一如既往，如果您有任何想法，欢迎随时告诉我们。您可以通过 Slack 或 Twitter 与我们联系。我们的项目是开源的（当然！），您可以在 GitHub 上报告 bug、提交功能请求或建议改进：