使用獨立的 lit-html

Lit 將 LitElement 的元件模型與基於 JavaScript 範本字面值的渲染結合到一個易於使用的套件中。但是，Lit 的範本部分被分解成一個名為 lit-html 的獨立函式庫，您可以在任何需要有效率地渲染和更新 HTML 的地方使用它，而無需使用 Lit 元件模型。

lit-html 套件可以與 lit 分開安裝

npm install lit-html

主要的匯入是 html 和 render

import {html, render} from 'lit-html';

獨立的 lit-html 套件也包含用於完整 Lit 開發人員指南中所述以下功能的模組

• lit-html/directives/* - 內建指令
• lit-html/directive.js - 自訂指令
• lit-html/async-directive.js - 自訂非同步指令
• lit-html/directive-helpers.js - 用於命令式更新的指令助手
• lit-html/static.js - 靜態 html 標籤
• lit-html/polyfill-support.js - 支援與 Web Components 填充程式介面（請參閱 樣式和 lit-html 範本）

Lit 範本是使用 JavaScript 範本字面值加上 html 標籤編寫的。字面值的內容主要是簡單的宣告式 HTML，並且可以包含表達式來插入和更新範本的動態部分（有關 Lit 範本語法的完整參考，請參閱 範本）。

html`<h1>Hello ${name}</h1>`

lit-html 範本表達式不會導致建立或更新任何 DOM。它只是一個 DOM 的描述，稱為 TemplateResult。要實際建立或更新 DOM，您需要將 TemplateResult 傳遞給 render() 函式，以及要渲染到的容器

import {html, render} from 'lit-html';

const name = 'world';
const sayHi = html`<h1>Hello ${name}</h1>`;
render(sayHi, document.body);

若要使您的範本動態化，您可以建立一個範本函式。每當您的資料變更時，請呼叫範本函式。

import {html, render} from 'lit-html';

// Define a template function
const myTemplate = (name) => html`<div>Hello ${name}</div>`;

// Render the template with some data
render(myTemplate('earth'), document.body);

// ... Later on ...
// Render the template with different data
render(myTemplate('mars'), document.body);

當您呼叫範本函式時，lit-html 會擷取目前的表達式值。範本函式不會建立任何 DOM 節點，因此速度很快且成本低廉。

範本函式會傳回包含範本和輸入資料的 TemplateResult。這是使用 lit-html 背後的主要原則之一：將 UI 建立為狀態的函式。

當您呼叫 render 時，lit-html 只會更新自上次渲染以來已變更的範本部分。這使得 lit-html 更新非常快速。

render 方法還接受一個 options 引數，讓您可以指定以下選項

• host：在使用 @eventName 語法註冊事件接聽器時要使用的 this 值。此選項僅在您將事件接聽器指定為簡單函式時適用。如果您使用事件接聽器物件指定事件接聽器，則事件接聽器物件會用作 this 值。有關事件接聽器的詳細資訊，請參閱 事件接聽器表達式。

• renderBefore：container 中一個可選的參考節點，lit-html 將在此節點之前渲染。預設情況下，lit-html 會附加到容器的末端。設定 renderBefore 可讓您渲染到容器內的特定位置。

• creationScope：lit-html 在複製範本時將呼叫 importNode 的物件（預設為 document）。這是為進階使用案例提供的。

例如，如果您使用獨立的 lit-html，您可能會像這樣使用渲染選項

<div id="container">
  <header>My Site</header>
  <footer>Copyright 2021</footer>
</div>

const template = () => html`...`;
const container = document.getElementById('container');
const renderBefore = container.querySelector('footer');
render(template(), container, {renderBefore});

上面的範例會將範本渲染在 <header> 和 <footer> 元素之間。

lit-html 專注於一件事：渲染 HTML。您如何將樣式套用到 lit-html 建立的 HTML 取決於您如何使用它—例如，如果您在像 LitElement 這樣的元件系統內使用 lit-html，您可以遵循該元件系統使用的模式。

一般來說，您如何設定 HTML 樣式將取決於您是否使用陰影 DOM

• 如果您沒有渲染到陰影 DOM 中，您可以使用全域樣式表來設定 HTML 樣式。
• 如果您渲染到陰影 DOM 中，則可以在陰影根內部渲染 <style> 標籤。

為了協助動態設定樣式，lit-html 提供了兩個指令來操作元素的 class 和 style 屬性

• classMap 根據物件的屬性在元素上設定類別。
• styleMap 根據樣式屬性和值的對應在元素上設定樣式。

編輯此頁面