簡單。 快速。 Web Components。
簡單
跳過樣板程式碼
Lit 建構於 Web Components 標準之上，僅加入您感到愉快且高效所需的功能：反應性、宣告式範本，以及少數貼心的功能，可減少樣板程式碼並讓您的工作更輕鬆。每個 Lit 功能在設計時都謹記著 Web 平台的發展。
快速
微小的體積，即時更新
Lit 的大小約為 5 KB（縮小和壓縮後），有助於保持您的套件大小較小，並縮短載入時間。而且渲染速度極快，因為 Lit 在更新時僅觸及 UI 的動態部分——無需重建虛擬樹並將其與 DOM 進行比較。
Web Components
可互通且面向未來
每個 Lit 元件都是原生的 Web Component，具有互通性的超能力。Web Components 可在任何使用 HTML 的地方使用，無論有無框架。這使得 Lit 非常適合建構可共享的元件、設計系統，或可維護、面向未來的網站和應用程式。
import {html, css, LitElement} from 'lit';import {customElement, property} from 'lit/decorators.js';
@customElement('simple-greeting')export class SimpleGreeting extends LitElement { static styles = css`p { color: blue }`;
@property() name = 'Somebody';
render() { return html`<p>Hello, ${this.name}!</p>`; }}import {html, css, LitElement} from 'lit';
export class SimpleGreeting extends LitElement { static styles = css`p { color: blue }`;
static properties = { name: {type: String}, };
constructor() { super(); this.name = 'Somebody'; }
render() { return html`<p>Hello, ${this.name}!</p>`; }}customElements.define('simple-greeting', SimpleGreeting);<simple-greeting name="World"></simple-greeting>自訂元素
Lit 元件是標準的自訂元素，因此瀏覽器將它們視為內建元素。在手寫的 HTML 或框架程式碼中使用它們，從您的 CMS 或靜態網站產生器輸出它們，甚至在 JavaScript 中建立實例——它們都能正常運作！
作用域樣式
Lit 預設使用Shadow DOM對您的樣式設定作用域。這可讓您的 CSS 選擇器保持簡單，並確保您的元件樣式不會影響頁面上的任何其他樣式，也不會受其影響。
反應式屬性
宣告反應式屬性以模擬元件的 API 和內部狀態。每當反應式屬性（或相應的 HTML 屬性）變更時，Lit 元件都會有效率地重新渲染。
宣告式範本
基於標記範本字串的 Lit 範本，簡單、富有表現力且快速，具有內嵌原生 JavaScript 表達式的 HTML 標記。無需學習自訂語法，也無需編譯。
使用 Lit 建構任何內容
可共享的元件
需要交付可放入任何網站（建構於任何堆疊之上）的互動式內容或功能嗎？由於瀏覽器原生支援 Web Components，它們是完美的解決方案——而 Lit 使它們易於建構。
設計系統
設計系統可協助您建立始終如一且符合品牌形象的卓越體驗。但是，如果您的組織使用多個框架該怎麼辦？有了 Lit，您可以建構一組適用於每個團隊的元件。
網站和應用程式
使用 Lit 元件逐步增強靜態網站，或建構整個應用程式。藉由採用 Web Components，Lit 可最大程度地減少鎖定並提高可維護性：一次更新或遷移一個元件，而不會中斷產品開發。
探索 Lit
與 Lit 和 Web Components 社群連結
隨時了解最新版本，深入瞭解如何使用 Web Components，並與我們的團隊分享專案和回饋。所有社群參與均受 Lit 行為準則約束——善待彼此！