什麼是 Lit？

Lit 是一個簡單的函式庫，用於建立快速、輕量的 Web 元件。

Lit 的核心是一個消除樣板程式碼的元件基底類別，它提供響應式狀態、作用域樣式和一個微小、快速且富有表現力的宣告式範本系統。

您可以使用 Lit 建立幾乎任何類型的 Web UI！

關於 Lit，首先要了解的是，每個 Lit 元件都是一個標準的 Web 元件。Web 元件具有互通性的超能力：由瀏覽器原生支援，Web 元件可用於任何 HTML 環境，無論有無任何框架。

這使得 Lit 成為開發可共享元件或設計系統的理想選擇。Lit 元件可用於多個應用程式和網站，即使這些應用程式和網站是建立在各種前端堆疊之上。使用 Lit 元件的網站開發人員不需要編寫甚至查看任何 Lit 程式碼；他們可以像使用內建 HTML 元素一樣使用這些元件。

Lit 也非常適合逐步增強基本的 HTML 網站。瀏覽器將識別您標記中的 Lit 元件並自動初始化它們，無論您的網站是手工製作、透過 CMS 管理、使用伺服器端框架建立，還是由 Jekyll 或 eleventy 等工具產生。

當然，您也可以使用 Lit 元件建立高度互動、功能豐富的應用程式，就像使用 React 或 Vue 等框架一樣。Lit 的功能和開發人員體驗與這些流行的替代方案相當，但 Lit 透過擁抱瀏覽器的原生元件模型，最大限度地減少了鎖定、最大化了彈性並促進了可維護性。

當您使用 Lit 建立應用程式時，很容易加入「原生」Web 元件，或使用其他函式庫建立的 Web 元件。您甚至可以一次更新一個元件到 Lit 的主要新版本，或遷移到另一個函式庫，而不會中斷產品開發。

如果您做過任何現代、基於元件的 Web 開發，您應該會對 Lit 感到賓至如歸。即使您以前沒有使用元件進行開發，我們認為您也會發現 Lit 非常容易上手。

每個 Lit 元件都是一個獨立的 UI 單元，由較小的構建模組組裝而成：標準 HTML 元素和其他 Web 元件。反過來，每個 Lit 元件本身也是一個構建模組，可用於（在 HTML 文件、另一個 Web 元件或框架元件中）建立更大、更複雜的介面。

這是一個小型但非平凡的元件（一個倒數計時器），它說明了 Lit 程式碼的外觀並突出了幾個關鍵功能

需要注意的一些事項

• Lit 的主要功能是 LitElement 基底類別，它是原生 HTMLElement 的方便且通用的擴展。您可以從它擴展以定義自己的元件。
• Lit 的富有表現力的宣告式範本（利用 JavaScript 標記範本字面量）使您可以輕鬆地描述元件的渲染方式。
• 響應式屬性代表元件的公開 API 和/或內部狀態；每當響應式屬性更改時，您的元件都會自動重新渲染。
• 樣式預設為作用域，保持您的 CSS 選擇器簡單，並確保您元件的樣式不會污染（或被污染）周圍的上下文。
• Lit 在原生 JavaScript 中運作良好，或者您可以使用 TypeScript，透過使用裝飾器和類型宣告來獲得更好的符合人體工學的體驗。

Lit 在開發期間不需要編譯或建置，因此如果您願意，幾乎可以免費使用工具。一流的IDE 支援（程式碼完成、程式碼檢查等）和生產工具（本地化、範本最小化等）隨時可用。

正如我們已經提到的，Lit 是建立各種 Web UI 的絕佳選擇，它將 Web 元件的基於互通性的優勢與現代、符合人體工學的開發人員體驗相結合。

Lit 也是

• 簡單。Lit 基於 Web 元件標準，只添加了您需要的一切，讓您感到高興和高效：響應性、宣告式範本和一些周到的功能，以減少樣板程式碼並讓您的工作更輕鬆。
• 快速。更新速度很快，因為 Lit 會追蹤您的 UI 的動態部分，並僅在底層狀態更改時更新這些部分，無需重建整個虛擬樹並與 DOM 的目前狀態進行比較。
• 輕量。Lit 的大小約為 5 KB（最小化和壓縮後），有助於保持套件大小小且加載時間短。

Lit 背後的團隊從第一天起就參與了 Web 元件的開發。我們幫助 Google 維護數萬個元件，提供一套全面的 Web 元件 polyfill，並深入參與標準和社群工作。

每個 Lit 功能都經過精心設計，並考慮了 Web 平台的發展；我們的目標是幫助您充分利用平台今天提供的功能，同時編寫準備好從未來增強功能中受益的程式碼。

• 開始使用：設定好開始使用 Lit 進行開發。
• 元件：了解 Lit 元件模型。
• 範本：使用 lit-html 語法編寫範本。
• 程式碼組織：編寫可重複使用、可維護的程式碼。

編輯此頁面