lit Web元件：構建快速、輕量級的 Web 元件

banq發表於2021-12-24
Web元件

Lit 是一個簡單的庫，用於構建快速、輕量級的 Web 元件。
Lit 的核心是一個殺手級模板：提供一些元件基類，包括：提供反應reactive狀態、作用域樣式和一個小巧、快速且富有表現力的宣告性模板系統。
Lit 建立在 Web Components 標準之上，新增了讓您快樂和高效所需的一切：反應性、宣告性模板和一些周到的功能，以減少樣板並讓您的工作更輕鬆。每個 Lit 功能都經過精心設計，考慮到了 Web 平臺的演變。
約為 5 KB（縮小和壓縮），Lit 有助於保持包大小小和載入時間短。渲染速度非常快，因為 Lit 在更新時只接觸 UI 的動態部分——無需重建虛擬樹並將其與 DOM 進行比較。
每個 Lit 元件都是本機 Web 元件，具有互操作性的超能力。Web 元件可以在您使用 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>`;
  }
}


自定義元素：

@customElement

Lit 元件是標準的自定義元素，因此瀏覽器將它們視為內建元素。在手寫的 HTML 或框架程式碼中使用它們，從您的 CMS 或靜態站點構建器輸出它們，甚至在 JavaScript 中建立例項——它們只是工作！
 

範圍樣式：

static styles = css`p { color: blue }`;

預設情況下，Lit 使用Shadow DOM限定您的樣式。這使您的 CSS 選擇器保持簡單，並確保您的元件的樣式不會影響 - 也不會受到 - 頁面上的任何其他樣式的影響。
 

反應屬性：

@property()

宣告反應性屬性以對元件的 API 和內部狀態進行建模。每當反應性屬性（或相應的 HTML 屬性）發生變化時，Lit 元件都會有效地重新渲染。
 

宣告式模板：

html`<p>Hello, ${this.name}!</p>`;

Lit 模板基於標記的模板文字，簡單、富有表現力且快速，具有內聯原生 JavaScript 表示式的 HTML 標記。無需學習自定義語法，無需編譯。
 

相關文章