裝飾器

類別裝飾器工廠，將裝飾的類別定義為自訂元素。

匯入

import { customElement } from 'lit/decorators.js';

簽名

customElement(tagName): (classOrDescriptor: ClassDescriptor | CustomElementClass) => any

參數

tagName

字串

要定義的自訂元素的標籤名稱。

詳細資訊

@customElement('my-element')
class MyElement extends LitElement {
  render() {
    return html``;
  }
}

將事件監聽器選項新增至在 lit-html 模板中用作事件監聽器的方法。

匯入

import { eventOptions } from 'lit/decorators.js';

簽名

eventOptions(options): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

參數

options

AddEventListenerOptions

一個物件，指定 EventTarget#addEventListener 和 EventTarget#removeEventListener 接受的事件監聽器選項。

一個屬性裝飾器，建立一個響應式屬性，反映相應的屬性值。當設定裝飾的屬性時，元素將會更新並渲染。可以選擇提供一個 PropertyDeclaration 來設定屬性功能。

匯入

import { property } from 'lit/decorators.js';

簽名

property(options?): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

參數

options?

PropertyDeclaration<unknown, unknown>

詳細資訊

此裝飾器應僅用於公共欄位。作為公共欄位，屬性應被視為主要由元素使用者透過屬性或屬性本身設定。通常，由元素變更的屬性應為私有或受保護的欄位，並應使用 state 裝飾器。但是，有時元素程式碼確實需要設定公共屬性。這通常應僅在回應使用者互動時完成，並且應觸發事件通知使用者；例如，核取方塊在點擊時會設定其 checked 屬性並觸發 changed 事件。通常不應針對非原始 (物件或陣列) 屬性變更公共屬性。在元素需要管理狀態的其他情況下，應使用透過 state 裝飾器裝飾的私有屬性。在需要時，可以透過公共屬性初始化狀態屬性，以方便複雜的互動。

class MyElement {
  @property({ type: Boolean })
  clicked = false;
}

一個屬性裝飾器，將類別屬性轉換為 getter，該 getter 在元素的 renderRoot 上執行 querySelector。

匯入

import { query } from 'lit/decorators.js';

簽名

query(selector, cache?): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

參數

selector

字串

一個 DOMString，包含一個或多個要比對的選取器。

cache?

布林值

一個可選的布林值，當為 true 時，只執行一次 DOM 查詢並快取結果。

一個屬性裝飾器，將類別屬性轉換為 getter，該 getter 在元素的 renderRoot 上執行 querySelectorAll。

匯入

import { queryAll } from 'lit/decorators.js';

簽名

queryAll(selector): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

參數

selector

字串

一個 DOMString，包含一個或多個要比對的選取器。

一個屬性裝飾器，將類別屬性轉換為 getter，該 getter 回傳指定 slot 的 assignedElements。提供一種宣告式方式來使用 HTMLSlotElement.assignedElements。

匯入

import { queryAssignedElements } from 'lit/decorators.js';

簽名

queryAssignedElements(options?): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

參數

options?

QueryAssignedElementsOptions

詳細資訊

可以傳遞一個可選的 QueryAssignedElementsOptions 物件。使用範例

class MyElement {
  @queryAssignedElements({ slot: 'list' })
  listItems!: Array<HTMLElement>;
  @queryAssignedElements()
  unnamedSlotEls!: Array<HTMLElement>;
  render() {
    return html`
      <slot name="list"></slot>
      <slot></slot>
    `;
  }
}

請注意，此屬性的類型應註解為 Array<HTMLElement>。

一個屬性裝飾器，將類別屬性轉換為 getter，該 getter 回傳指定 slot 的 assignedNodes。

匯入

import { queryAssignedNodes } from 'lit/decorators.js';

簽名

queryAssignedNodes(options?): TSDecoratorReturnType

參數

options?

QueryAssignedNodesOptions

詳細資訊

可以傳遞一個可選的 QueryAssignedNodesOptions 物件。使用範例

class MyElement {
  @queryAssignedNodes({slot: 'list', flatten: true})
  listItems!: Array<Node>;
  render() {
    return html`
      <slot name="list"></slot>
    `;
  }
}

請注意，此屬性的類型應註解為 Array<Node>。使用 queryAssignedElements 裝飾器僅列出元素，並可選擇使用 CSS 選取器篩選元素清單。

一個屬性裝飾器，將類別屬性轉換為 getter，該 getter 回傳一個 Promise，該 Promise 會解析為在元素的 updateComplete Promise 解析後在元素的 renderRoot 上執行的 querySelector 的結果。當查詢的屬性可能會隨元素狀態而變更時，可以使用此裝飾器，而無需使用者在存取屬性之前等待 updateComplete。

匯入

import { queryAsync } from 'lit/decorators.js';

簽名

queryAsync(selector): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

參數

selector

字串

一個 DOMString，包含一個或多個要比對的選取器。

宣告一個私有或受保護的響應式屬性，該屬性在變更時仍會觸發元素更新。它不會從對應的屬性反映。

匯入

import { state } from 'lit/decorators.js';

簽名

state(options?): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

參數

options?

InternalPropertyDeclaration<unknown>

詳細資訊

以這種方式宣告的屬性不得從 HTML 或 HTML 範本系統使用，它們僅適用於元素內部的屬性。這些屬性可能會被像 Closure Compiler 這樣的最佳化工具重新命名。

匯入

import { InternalPropertyDeclaration } from 'lit/decorators.js';

queryAssignedElements 裝飾器的選項。擴充了可傳遞到 HTMLSlotElement.assignedElements 中的選項。

匯入

import { QueryAssignedElementsOptions } from 'lit/decorators.js';

queryAssignedNodes 裝飾器的選項。擴充了可傳遞到 HTMLSlotElement.assignedNodes 中的選項。

匯入

import { QueryAssignedNodesOptions } from 'lit/decorators.js';