元件概觀
Lit 元件是可重複使用的 UI 片段。您可以將 Lit 元件視為一個容器,其中包含一些狀態,並根據其狀態顯示 UI。它也可以對使用者輸入做出反應、觸發事件——任何您期望 UI 元件執行的操作。而且 Lit 元件是 HTML 元素,因此它具有所有標準元素 API。
建立 Lit 元件涉及許多概念
定義元件。Lit 元件實作為向瀏覽器註冊的自訂元素。
渲染。元件具有渲染方法,會呼叫該方法以渲染元件的內容。在渲染方法中,您為元件定義範本。
響應式屬性。屬性會保留元件的狀態。變更一個或多個元件的響應式屬性會觸發更新週期,並重新渲染元件。
樣式。元件可以定義封裝的樣式來控制自身的外觀。
生命週期。Lit 定義一組您可以覆寫的回呼,以便加入元件的生命週期——例如,在將元素新增至頁面時,或在元件更新時執行程式碼。
以下是一個範例元件
此範例使用 TypeScript 裝飾器。
請參閱 裝飾器文件,以取得關於設定 TypeScript 裝飾器的更多資訊。