飛快的範本和網頁元件 - lit-html & LitElement

Justin Fagnani

今天我們很高興在此宣布,兩個新一代網頁開發程式庫的第一個穩定版本:lit-htmlLitElement

lit-html 是小型、快速又豐富的 HTML 範本程式庫。LitElement 是用於使用 lit-html 範本建立網頁元件的簡單基本類別。

如果您是參與專案的追蹤功能,您大概知道什麼是 lit-html 和 LitElement,如有需要,您也可以跳至結尾。如果您是 lit-html 和 LitElement 的新手,請繼續閱讀下文簡介。

lit-html:小型且快速的 HTML 範本程式庫

lit-html 是精簡的 JavaScript 程式庫 (超過 3,000 組封裝、壓縮和 gzip 格式),以及適用於 HTML 範本的快速 JavaScript 程式庫。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 不需要執行任何差異;而是會記住您在範本中插入運算式的位置,並且只更新這些動態部分。
  • Expressive。lit-html 提供 JavaScript、宣告式 UI 和功能程式設計模式的完整功能。lit-html 範本中的運算式只是 JavaScript,所以您不需要學習自訂語法,並能隨心所欲地表達語言。lit-html 本身支援多種值,包括字串、DOM 節點、陣列等等。範本本身是可計算、傳送至函式或巢狀結構的值。
  • 可擴充:lit-html 也能自訂及擴充,也就是您專屬的範本建構套件。指令可自訂值的處理方式,支援非同步值、有效的鍵重複重複值、錯誤界線等。lit-html 包含數個現成可用的指令,可讓您輕鬆定義自己的指令。

許多程式庫和專案都已納入 lit-html。您可以在 GitHub 的 awesome-lit-html 存放區中找到部分程式庫的清單。

如果不需要範本,您現在可以先參閱 lit-html 文件。如果您想建構要在應用程式中使用的元件 或與團隊分享,請繼續閱讀下文

LitElement:輕量 Web 元件基礎類別

LitElement 是一種輕量的基本類別,可讓您輕鬆建構及分享 Web 元件。

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>

如果您使用網頁元件,那麼您應該會知道 Chrome、Safari 和 Firefox 現在已經原生支援這些元件。即將推出支援邊緣,且只有舊版瀏覽器需要 polyfill。

如果您剛開始使用網頁元件,不妨試試看!網頁元件可讓您以與其他程式庫、工具和架構互通的方式擴充 HTML。因此非常適合在大型機構中共用 UI 元素、發布可在網路上任何位置使用的元件,或是建構質感設計等 UI 設計系統。

您可以在任何採用 HTML 的地方使用自訂元素:在主要文件中、CMS、Markdown,或者以 React 和 Vue 等架構建構的檢視畫面中。您也可以混合搭配 LitElement 元件與其他網頁元件,無論這些元件是以香草網頁技術撰寫,還是以 Salesforce Lightning Web 元件、Ionic 的 StencilSkateJSPolymer 程式庫製作而成。

立即開始

想試試 lit-html 和 LitElement 嗎?你可以從 LitElement 教學著手:

如果您有興趣單獨使用 lit-html 或將 lit-html 範本整合至其他專案,請參閱 lit-html 文件」:

一如往常,歡迎與我們分享你的想法。您可以透過 SlackTwitter 與我們聯絡。我們的專案屬於開放原始碼 (當然!),您可以在 GitHub 上回報錯誤、提出功能要求或建議改善項目: