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 和樣式的初始狀態，保留 Web 元件的所有封裝邊界，即使在下載單行 JavaScript 之前！

稍後，當 <demo-greeter> 的 JavaScript 定義最終加載時，靜態渲染的元件將透過稱為水合作用的過程升級為其完全互動的 JavaScript 實作。

靜態渲染元件可以有效縮短頁面開始載入到內容變得可見之間的時間。這是對網站回應能力的重要考量，對於連線速度較慢的使用者和裝置尤其如此。

透過將元件的初始狀態作為靜態 HTML 傳輸，瀏覽器能夠以比下載、剖析和評估這些元件的 JavaScript 實作更快地繪製初始檢視。

如需更深入了解靜態渲染的好處，請查看網路上的渲染，如需討論如何衡量網站效能的此一方面，請查看最大內容繪製 (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 可用。將 polyfill 整合到您的網站中，已在 @lit-labs/eleventy-plugin-lit README 中記錄。

如需更多關於宣告式 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，如果您有任何建議或發現任何問題，請透過開始討論或提出問題來告訴我們。