今天，我們很高興宣布推出兩個新一代網頁開發程式庫的首個穩定版本：lit-html 和 LitElement。
lit-html 是用於 HTML 範本的迷你程式庫，速度快且功能強大。LitElement 是簡單的基本類別，可透過 lit-html 範本建立網頁元件。
如果您一直在追蹤這些專案，可能就知道 lit-html 和 LitElement 的用途 (如有需要，您可以略過至結尾)。如果您不熟悉 lit-html 和 LitElement，請繼續閱讀以下總覽。
lit-html：用於 HTML 範本的快速小型程式庫
lit-html 是用於 HTML 範本的 JavaScript 程式庫，體積小 (僅 3 千多個已綁定、精簡和壓縮的檔案)，且速度快。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：輕量級網頁元件基礎類別
LitElement 是輕量級基礎類別，可讓您輕鬆建構及分享網頁元件。
LitElement 會使用 lit-html 轉譯元件，並新增 API 來宣告回應式屬性和屬性。元素的屬性變更時，會自動更新。而且更新速度快速，無需進行差異比較。
以下是 TypeScript 中的簡易 LitElement 元件：
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
(我們也有很棒的一般 JavaScript API)。
這會建立元素，您可以在任何使用一般 HTML 元素的地方使用：
<name-tag name="Ida"></name-tag>
如果您已使用 Web 元件，那麼您會很高興知道 Chrome、Safari 和 Firefox 現已原生支援 Web 元件。Edge 支援功能即將推出，且只有舊版瀏覽器需要使用 polyfill。
如果您是 Web 元件的初學者，不妨試試看！您可以使用 Web 元件擴充 HTML，以便與其他程式庫、工具和架構互動。因此，這類元件非常適合用於大型機構內部共用 UI 元素、發布可在任何網站上使用的元件，或是建構 Material Design 等 UI 設計系統。
您可以在任何使用 HTML 的地方使用自訂元素：主要文件、CMS、Markdown 或使用 React 和 Vue 等架構建構的檢視畫面。您也可以將 LitElement 元件與其他 Web 元件混合搭配，無論這些元件是使用一般網頁技術編寫，還是透過 Salesforce Lightning Web 元件、Ionic 的 Stencil、SkateJS 或 Polymer 程式庫 等工具製作，皆可。
開始使用
想試試 lit-html 和 LitElement 嗎？您可以從 LitElement 教學課程開始學習：
如果您想單獨使用 lit-html，或將 lit-html 範本整合至其他專案，請參閱 lit-html 說明文件：
如有任何問題，歡迎隨時與我們聯絡。您可以透過 Slack 或 Twitter 與我們聯絡。我們的專案當然是開放原始碼的！您可以在 GitHub 上回報錯誤、提出功能要求或改善建議：