闪电般快速的模板与 Web Components：lit-html 与 LitElement

今天我们很高兴地宣布我们两个 下一代 Web 开发库的首个正式版本： lit-html 和 LitElement。

lit-html 是一个轻量、快速、富有表现力的 HTML 模板库。LitElement 是一个用于创建带有 lit-html 模板的 Web Components 的简单基类。

如果你一直在关注这些项目，你可能已经知道 lit-html 和 LitElement 是什么了（你也可以跳到最后）。如果你是 lit-html 和 LitElement 的新手，请继续阅读以了解概述。

lit-html 是一个轻量（打包、压缩和 gzip 后仅 3k 多）且快速的 JavaScript HTML 模板库。lit-html 与函数式编程方法配合良好，让你能够以声明式的方式表达应用的 UI，将其作为状态的函数。

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 不需要进行任何 diff 操作；相反，它会记住你在模板中插入表达式的位置，并且只更新这些动态部分。

• 富有表现力。lit-html 赋予你 JavaScript 的全部能力、声明式 UI 和函数式编程模式。lit-html 模板中的表达式就是 JavaScript，因此你不需要学习自定义语法，可以充分利用语言的所有表达能力。lit-html 原生支持多种类型的值：字符串、DOM 节点、数组等。 模板本身也是值，可以被计算、在函数之间传递，也可以嵌套。

• 可扩展：lit-html 也是可定制和可扩展的——属于你自己的模板构建工具包。指令（directives）可以定制值的处理方式，支持异步值、高效的键控重复、错误边界等。lit-html 包含多个开箱即用的指令，并且让你可以轻松定义自己的指令。

许多库和项目已经集成了 lit-html。你可以在 GitHub 上的 awesome-lit-html 仓库中找到其中一些库的列表。

如果模板功能是你所需要的全部，你可以立即开始使用 lit-html 文档。如果你想构建可以在应用中使用或与团队共享的组件，请继续阅读以了解更多信息。

LitElement 是一个轻量级基类，它让构建和共享 Web Components 变得比以往任何时候都更容易。

LitElement 使用 lit-html 来渲染组件，并添加了用于声明响应式属性和特性的 API。当属性发生变化时，元素会自动更新。而且它们的更新速度很快，无需 diff 操作。

这是一个简单的 LitElement 组件：

@customElement('name-tag')
class NameTag extends LitElement {
  @property()
  name = 'a secret';

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}

class NameTag extends LitElement {
  static properties = {
    name: {},
  };

  constructor() {
    super();
    this.name = 'a secret';
  }

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}
customElements.define('name-tag', NameTag);

这会创建一个你可以在任何使用常规 HTML 元素的地方使用的元素：

<name-tag name="Ida"></name-tag>

如果你已经在使用 Web Components，你会很高兴地听到它们现在在 Chrome、Safari 和 Firefox 中已获得原生支持。Edge 的支持也即将推出，polyfill 仅在旧版浏览器中才需要。

如果你是 Web Components 的新手，你应该试一试！Web Components 让你能够以与其他库、工具和框架互操作的方式扩展 HTML。这使得它们非常适合在大型组织内共享 UI 元素、为 Web 上任何地方使用的组件发布组件，或构建像 Material Design 这样的 UI 设计系统。

你可以在任何使用 HTML 的地方使用自定义元素：在主文档中、在 CMS 中、在 Markdown 中，或在使用 React 和 Vue 等框架构建的视图中。你还可以将 LitElement 组件与其他 Web Components 混合使用，无论它们是使用原生 Web 技术编写的，还是借助 Salesforce Lightning Web Components、Ionic 的 Stencil、 SkateJS 或 Polymer 库等工具创建的。

想试试 lit-html 和 LitElement？LitElement 教程是一个很好的起点：

• 试用 LitElement

如果你有兴趣单独使用 lit-html，或将 lit-html 模板集成到另一个项目中，请参阅 lit-html 文档：

• lit-html 文档

一如既往，请告诉我们你的想法。你可以在 Discord 或 Twitter 上联系我们。我们的项目是开源的（当然！），你可以在 GitHub 上报告 bug、提交功能请求或建议改进：

• lit-html on GitHub
• LitElement on GitHub