Eleventy + Lit

Lit 团队很高兴地宣布一个实验性预览版本的 @lit-labs/eleventy-plugin-lit，这是 Eleventy 的一个新插件，它可以在您的 Eleventy 构建过程中将您的 Lit 组件渲染为静态 HTML，并让您在 JavaScript 加载后对其进行水合。

现在在 GitHub 和 NPM 上查看它，或者继续阅读以了解有关它做什么、为什么您可能想使用它以及它是如何工作的更多信息。

将 @lit-labs/eleventy-plugin-lit 添加到您的 Eleventy 配置后，每当您在 markdown 或 HTML 文件中编写自定义元素标签时，该组件的 shadow DOM 和样式的初始状态将直接渲染到静态 HTML 中。

例如，给定一个 markdown 文件 hello.md

# Greetings

<demo-greeter name="World"></demo-greeter>

以及一个组件定义 js/demo-greeter.js

import {LitElement, html, css} from 'lit';

class DemoGreeter extends LitElement {
  static styles = css`
    b { color: red; }
  `;

  static properties = {
    name: {},
  };

  render() {
    return html`Hello <b>${this.name}</b>!`;
  }
}
customElements.define('demo-greeter', DemoGreeter);

那么 Eleventy 将生成一个像这样的 HTML 文件 hello/index.html

<h1>Greetings</h1>

<demo-greeter name="World">
  <template shadowroot="open">
    <style>
      b { color: red; }
    </style>
    Hello <b>World</b>!
  </template>
</demo-greeter>

此 HTML 允许浏览器绘制组件 DOM 和样式的初始状态，即使在下载一行 JavaScript 之前，也能保留 Web 组件的所有封装边界！

后来，当 <demo-greeter> 的 JavaScript 定义最终加载时，静态渲染的组件通过称为*水合*的过程升级到其完全交互式的 JavaScript 实现。

静态渲染组件可以是减少页面开始加载到内容可见之间所需时间的有效方法。这是一个重要的考虑因素，有助于提高网站的响应速度，尤其是在连接速度较慢和设备较慢的用户方面。

通过将组件的初始状态作为静态 HTML 传输，浏览器能够比下载、解析和评估这些组件的 JavaScript 实现所需的时间快得多地绘制初始视图。

要深入了解静态渲染的优势，请查看Web 上的渲染，以及有关如何衡量 Web 性能这一方面的讨论，请查看最大内容绘制 (LCP)。

该插件在后台使用 @lit-labs/ssr，它的工作原理是在 Eleventy Node 进程中创建一个类似浏览器的轻量级环境中的每个组件的实例，并使用 Lit 的 render 函数的特殊版本来评估元素的模板。这个特殊的 render 函数的行为与 Lit 在浏览器中使用的 render 函数非常相似，只是它发出字符串流而不是写入 DOM，使其能够高效地写入静态 HTML。

有关 @lit-labs/ssr 的更多信息，请查看其 GitHub 仓库。我们将在不久的将来扩展文档，以帮助开发人员将 @lit-labs/ssr 集成到更多工具和框架中！

当 @lit-labs/ssr 渲染组件时，它使用 <template shadowroot> HTML 元素来表示组件的 shadow DOM 和样式。当浏览器 HTML 解析器遇到 <template shadowroot> 时，它将该模板的内容应用为其父元素的 shadow root。这样，Web 组件的所有 DOM 和样式封装保证都将得到保留。

截至 2022 年 2 月，Chrome 和 Edge 原生支持声明式 Shadow DOM，但 Firefox 和 Safari 尚未实施它。对于还没有支持的浏览器，可以使用非常小的 polyfill。在 @lit-labs/eleventy-plugin-lit README 中记录了将 polyfill 集成到您的网站的方式。

有关声明式 Shadow DOM 的更多信息，请查看声明式 Shadow DOM。

虽然静态渲染可以让组件的初始绘制尽快发生，但组件还没有交互性，因为它们的 JavaScript 实现还没有加载。

水合是静态渲染的组件升级到其 JavaScript 实现的过程，使其变得响应且交互式。

Lit 通过特殊的 @lit-labs/ssr-client/lit-element-hydrate-support.js 模块提供对水合的自动支持。只要加载了此模块，Lit 组件就会检测到它们是否已被静态渲染，并将采用它们现有的 shadow root。

使用 Lit 进行水合非常高效，因为 Lit 知道它不需要在升级时重新渲染现有的 shadow root。如果数据在水合后发生更改，则仅会更新 shadow root 中发生更改的部分。

查看 @lit-labs/eleventy-plugin-lit 的 路线图，了解您可以在未来几个月内预期的一些主要功能和修复。

如果您尝试使用 @lit-labs/eleventy-plugin-lit，如果您有任何建议或发现任何问题，请通过启动 讨论 或提交 问题 来告知我们。