闪电般快速的模板和 Web 组件：lit-html 和 LitElement

今天我们很高兴地宣布我们两个下一代 Web 开发库的第一个稳定版本：lit-html 和 LitElement.

lit-html 是一个微小、快速且表达力强的 HTML 模板库。LitElement 是一个简单的基类，用于使用 lit-html 模板创建 Web 组件。

如果您一直关注这些项目，您可能已经了解了 lit-html 和 LitElement 的所有内容（如果您愿意，您可以 跳到最后）。如果您是 lit-html 和 LitElement 的新手，请继续阅读以了解更多信息。

lit-html 是一个微小（仅 3k 捆绑、压缩和 gzip）且快速的 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 不需要进行任何差异比较；相反，它会记住您在模板中插入表达式的 位置，并且只更新这些动态部分。

• 表达力强。lit-html 为您提供了 JavaScript、声明式 UI 和函数式编程模式的全部功能。lit-html 模板中的表达式只是 JavaScript，因此您无需学习自定义语法，并且可以随意使用语言的表达力。lit-html 本地支持多种类型的 value：字符串、DOM 节点、数组等等。模板本身是 value，可以计算、传递给函数和从函数传递以及嵌套。

• 可扩展性：lit-html 也是可定制和可扩展的——您自己的模板构建工具包。指令可以自定义 value 的处理方式，从而允许异步 value、高效的键控重复、错误边界等等。lit-html 包含几个现成的指令，并且可以轻松定义您自己的指令。

许多库和项目已经包含了 lit-html。您可以在 GitHub 上的 awesome-lit-html 库中找到这些库的列表。

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

LitElement 是一个轻量级的基类，它使构建和共享 Web 组件变得比以往更容易。

LitElement 使用 lit-html 来渲染组件，并添加 API 来声明反应式属性和属性。当元素的属性更改时，元素会自动更新。并且更新很快，无需差异比较。

这是一个简单的 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 组件，您会很高兴听到它们现在已在 Chrome、Safari 和 Firefox 中得到原生支持。Edge 支持即将推出，并且只有在旧版浏览器版本中才需要 polyfill。

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

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

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

• 尝试 LitElement

如果您有兴趣单独使用 lit-html，或者将 lit-html 模板集成到另一个项目中，请查看 lit-html 文档

• lit-html 文档

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

• GitHub 上的 lit-html
• GitHub 上的 LitElement