Eleventy + Lit

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

现在就去 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 和样式的初始状态，同时保留 Web Components 的所有封装边界，甚至在下载任何 JavaScript 之前！

稍后，当 <demo-greeter> 的 JavaScript 定义最终加载完成后，静态渲染的组件将通过一个称为 hydration 的过程升级为其完全可交互的 JavaScript 实现。

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

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

要深入了解静态渲染的好处，请查看 <Rendering on the Web>，要了解如何衡量 Web 性能的这方面的讨论，请查看 <Largest Contentful Paint (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 Components 的所有 DOM 和样式封装保证都得以保留。

截至 2022 年 2 月，Chrome 和 Edge 已原生支持声明式 Shadow DOM，但 Firefox 和 Safari 尚未实现。对于尚不支持的浏览器，有一个非常小的 polyfill 可用。将 polyfill 集成到你的网站中的方法已记录 在 @lit-labs/eleventy-plugin-lit 的 README 中。

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

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

Hydration 是将静态渲染的组件升级为其 JavaScript 实现的过程，使其变得响应式和可交互。

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

Lit 的 hydration 非常高效，因为 Lit 知道在升级时不需要重新渲染现有的 shadow root。如果数据在 hydration 之后发生变化，则只有 shadow root 中发生变化的部分会被更新。

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

如果你试用了 @lit-labs/eleventy-plugin-lit，请通过发起一个讨论或提交一个 issue 来告诉我们你是否有任何建议或发现了任何问题。