閃電般快速的範本與 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 是一個微小（僅超過 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 原生支援多種值：字串、DOM 節點、陣列等。範本本身是可以計算、傳遞到函數和從函數傳遞，以及可以巢狀的值。

• 可擴展：lit-html 也是可自訂和可擴展的——您自己的範本建構套件。指令會自訂如何處理值，從而實現非同步值、有效率的鍵值重複、錯誤邊界等。lit-html 包含幾個隨時可用的指令，並可以輕鬆地定義您自己的指令。

許多函式庫和專案已經加入了 lit-html。您可以在 GitHub 上 awesome-lit-html 儲存庫中找到其中一些函式庫的清單。

如果範本是您唯一需要的，您可以立即開始使用 lit-html 文件。如果您想要建立元件以在您的應用程式中使用或與您的團隊分享，請繼續閱讀以了解更多資訊。

LitElement 是一個輕量級的基底類別，使建立和共享 Web Components 比以往任何時候都更容易。

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 Components，您會很高興聽到 Chrome、Safari 和 Firefox 現在原生支援它們。Edge 支援即將推出，並且僅舊版瀏覽器需要 polyfill。

如果您是 Web Components 的新手，您應該試用看看！Web Components 讓您能夠以與其他函式庫、工具和框架互動的方式擴展 HTML。這使其非常適合在大型組織中共享 UI 元素、發布元件以供網路上任何地方使用，或建立像 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 上回報錯誤、提出功能請求或建議改進

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