渲染
將範本加入你的元件，以定義它應該渲染的內容。範本可以包含表達式，也就是動態內容的預留位置。
若要為 Lit 元件定義範本，請加入 render() 方法
使用 Lit 的 html 標籤函式，在 JavaScript 標籤範本字串中編寫 HTML 範本。
Lit 範本可以包含 JavaScript 表達式。您可以使用表達式來設定文字內容、屬性、特性和事件監聽器。render() 方法也可以包含任何 JavaScript，例如，您可以建立本機變數以在表達式中使用。
可渲染的值
“可渲染的值”的永久連結通常，元件的 render() 方法會傳回單一 TemplateResult 物件（與 html 標籤函式傳回的類型相同）。但是，它可以傳回 Lit 可以渲染為 HTML 元素子系的任何內容
這與可以渲染到 Lit 子表達式的值集合幾乎完全相同。唯一的差異是子表達式可以渲染 SVGTemplateResult，由 svg 函式傳回。此類範本結果只能渲染為 <svg> 元素的後代。
編寫良好的 render() 方法
“編寫良好的 render() 方法”的永久連結為了充分利用 Lit 的功能性渲染模型，您的 render() 方法應遵循下列準則
- 避免變更元件的狀態。
- 避免產生任何副作用。
- 僅使用元件的特性作為輸入。
- 當給定相同的特性值時，傳回相同的結果。
遵循這些準則可保持範本的確定性，並使其更容易推斷程式碼。
在大多數情況下，您應該避免在 render() 之外進行 DOM 更新。相反地，將元件的範本表示為其狀態的函式，並將其狀態擷取在特性中。
例如，如果您的元件需要在收到事件時更新其 UI，請讓事件監聽器設定在 render() 中使用的響應式特性，而不是直接操作 DOM。
如需更多資訊，請參閱響應式屬性。
組合範本
“組合範本”的永久連結您可以從其他範本組合 Lit 範本。以下範例從頁面標頭、頁尾和主要內容的較小範本組合名為 <my-page> 的元件範本
在此範例中，個別範本定義為執行個體方法，因此子類別可以擴充此元件並覆寫一個或多個範本。
待辦事項
將範例移至組合區段，加入交叉參照。
您也可以透過匯入其他元素並在範本中使用它們來組合範本
範本何時渲染
“範本何時渲染”的永久連結當 Lit 元件加入頁面的 DOM 時，會先渲染其範本。在初始渲染之後，對元件的響應式屬性的任何變更都會觸發更新週期，重新渲染元件。
Lit 會批次更新，以最大化效能和效率。同時設定多個特性只會觸發一個更新，在微任務計時中以非同步方式執行。
在更新期間，只會重新渲染 DOM 中變更的部分。雖然 Lit 範本看起來像字串內插，但 Lit 會解析並建立一次靜態 HTML，然後只更新之後表達式中變更的值，使更新非常有效率。
如需更新週期的更多資訊，請參閱特性變更時會發生什麼事。
DOM 封裝
“DOM 封裝”的永久連結Lit 使用陰影 DOM 來封裝元件渲染的 DOM。陰影 DOM 可讓元素建立自己與主文件樹分開的隔離 DOM 樹。它是 Web 元件規格的核心功能，可實現互通性、樣式封裝和其他優點。
如需陰影 DOM 的更多資訊，請參閱 Web Fundamentals 上的 陰影 DOM v1：獨立式 Web 元件。
如需有關在元件中使用陰影 DOM 的更多資訊，請參閱使用陰影 DOM。