元件概觀

Lit 元件是可重複使用的 UI 片段。您可以將 Lit 元件視為一個容器,其中包含一些狀態,並根據其狀態顯示 UI。它也可以對使用者輸入做出反應、觸發事件——任何您期望 UI 元件執行的操作。而且 Lit 元件是 HTML 元素,因此它具有所有標準元素 API。

建立 Lit 元件涉及許多概念

  • 定義元件。Lit 元件實作為向瀏覽器註冊的自訂元素

  • 渲染。元件具有渲染方法,會呼叫該方法以渲染元件的內容。在渲染方法中,您為元件定義範本

  • 響應式屬性。屬性會保留元件的狀態。變更一個或多個元件的響應式屬性會觸發更新週期,並重新渲染元件。

  • 樣式。元件可以定義封裝的樣式來控制自身的外觀。

  • 生命週期。Lit 定義一組您可以覆寫的回呼,以便加入元件的生命週期——例如,在將元素新增至頁面時,或在元件更新時執行程式碼。

以下是一個範例元件

此範例使用 TypeScript 裝飾器。

請參閱 裝飾器文件,以取得關於設定 TypeScript 裝飾器的更多資訊。