デコレーター

デコレートされたクラスをカスタム要素として定義するクラスデコレーターファクトリー。

インポート

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

シグネチャ

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

パラメーター

tagName

string

定義するカスタム要素のタグ名。

詳細

@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;
}

クラスプロパティを要素のrenderRootでquerySelectorを実行するgetterに変換するプロパティデコレーター。

インポート

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

シグネチャ

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

パラメーター

selector

string

一致する1つ以上のセレクターを含むDOMString。

cache?

boolean

オプションのブール値。trueの場合、DOMクエリを一度だけ実行し、結果をキャッシュします。

クラスプロパティを要素のrenderRootでquerySelectorAllを実行するgetterに変換するプロパティデコレーター。

インポート

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

シグネチャ

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

パラメーター

selector

string

一致する1つ以上のセレクターを含むDOMString。

クラスプロパティを、指定されたslotのassignedElementsを返すgetterに変換するプロパティデコレーター。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>としてアノテーションを付ける必要があることに注意してください。

クラスプロパティを、指定されたslotのassignedNodesを返すgetterに変換するプロパティデコレーター。

インポート

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>としてアノテーションを付ける必要があることに注意してください。要素のみをリストし、オプションでCSSセレクターを使用して要素リストをフィルター処理するには、queryAssignedElementsデコレーターを使用します。

クラスプロパティを、要素のupdateCompleteプロミスが解決された後に行われる要素のrenderRootでのquerySelectorの結果に解決されるプロミスを返すgetterに変換するプロパティデコレーター。クエリされたプロパティが要素の状態によって変化する可能性がある場合は、ユーザーがプロパティにアクセスする前にupdateCompleteを待機する必要がない代わりに、このデコレーターを使用できます。

インポート

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

シグネチャ

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

パラメーター

selector

string

一致する1つ以上のセレクターを含む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';