カスタムディレクティブ

抽象クラスDirectiveの基底クラスで、ディレクティブを含むパートが再レンダリングの結果としてクリアされた場合、またはユーザーが以前にディレクティブを含むレンダリングされたパートでpart.setConnected(false)を呼び出した場合（たとえば、LitElementがDOMから切断されたときに発生します）、disconnectedメソッドが呼び出されます。

インポート

import { AsyncDirective } from 'lit/async-directive.js';

詳細

その後、包含するパートでpart.setConnected(true)が呼び出された場合、ディレクティブの次のupdate/renderコールバックの前に、reconnectedメソッドが呼び出されます。disconnectedを実装する場合、再接続との互換性のためにreconnectedも実装する必要があります。ディレクティブが切断されている間も更新が発生する可能性があることに注意してください。そのため、ディレクティブは通常、レンダリング/更新中にthis.isConnectedフラグをチェックして、ガベージコレクションを防ぐ可能性のあるリソースのサブスクライブが安全かどうかを判断する必要があります。

インポート

import { AttributePart } from 'lit/async-directive.js';

インポート

import { BooleanAttributePart } from 'lit/async-directive.js';

インポート

import { ChildPart } from 'lit/async-directive.js';

Directiveクラスからユーザー向けのディレクティブ関数を作成します。この関数は、ディレクティブのrender()メソッドと同じパラメータを持ちます。

インポート

import { directive } from 'lit/async-directive.js';

シグネチャ

directive(c): (values: Parameters<InstanceType<C>["render"]>) => DirectiveResult<C>

パラメータ

c

C

カスタムディレクティブを作成するための基底クラス。ユーザーはこのクラスを拡張し、renderやupdateを実装し、サブクラスをdirectiveに渡す必要があります。

インポート

import { Directive } from 'lit/async-directive.js';

インポート

import { ElementPart } from 'lit/async-directive.js';

インポート

import { EventPart } from 'lit/async-directive.js';

インポート

import { PartType } from 'lit/async-directive.js';

型

インポート

import { PropertyPart } from 'lit/async-directive.js';

インポート

import { AttributePartInfo } from 'lit/async-directive.js';

インポート

import { ChildPartInfo } from 'lit/async-directive.js';

インポート

import { DirectiveClass } from 'lit/async-directive.js';

このユーティリティ型は、ディレクティブクラスの render() メソッドのシグネチャを抽出します。これにより、生成されたディレクティブ関数の型に使用できます。

インポート

import { DirectiveParameters } from 'lit/async-directive.js';

型

生成されたディレクティブ関数はディレクティブを評価せず、引数をキャプチャする DirectiveResult オブジェクトを返します。

インポート

import { DirectiveResult } from 'lit/async-directive.js';

インポート

import { ElementPartInfo } from 'lit/async-directive.js';

インポート

import { Part } from 'lit/async-directive.js';

型

ディレクティブがバインドされているパートに関する情報。

インポート

import { PartInfo } from 'lit/async-directive.js';

型

詳細

これは、ディレクティブが属性バインディングでのみ使用できるディレクティブなど、有効なパートにアタッチされていることを確認するのに役立ちます。

インポート

import { clearPart } from 'lit/directive-helpers.js';

シグネチャ

clearPart(part): void

パラメータ

part

ChildPart

ChildPart のコミット済みの値を返します。

インポート

import { getCommittedValue } from 'lit/directive-helpers.js';

シグネチャ

getCommittedValue(part): unknown

パラメータ

part

ChildPart

詳細

コミット済みの値は、変更の検出とパートの効率的な更新に使用されます。テンプレート値がコミット前に変換される場合、テンプレートまたはディレクティブによって設定された値とは異なる場合があります。

• TemplateResult は TemplateInstance としてコミットされます
• Iterable は Array<ChildPart> としてコミットされます
• 他のすべての型は、テンプレート値、またはディレクティブによって返されたまたは設定された値としてコミットされます。

DirectiveResult の Directive クラスを取得します

インポート

import { getDirectiveClass } from 'lit/directive-helpers.js';

シグネチャ

getDirectiveClass(value): undefined | DirectiveClass

パラメータ

value

unknown

指定されたコンテナ ChildPart の DOM に、コンテナ ChildPart の末尾か、オプションの refPart の前に ChildPart を挿入します。

インポート

import { insertPart } from 'lit/directive-helpers.js';

シグネチャ

insertPart(containerPart, refPart?, part?): ChildPart

パラメータ

containerPart

ChildPart

新しい ChildPart を追加するパート

refPart?

ChildPart

新しい ChildPart を追加する前のパート。省略すると、containerPart の末尾に追加されます

part?

ChildPart

挿入するパート。または、新しいパートを作成する場合は undefined

詳細

これは、パートを containerPart のコミット済みの値に追加しません。これは、呼び出し元が行う必要があります。

値が DirectiveResult であるかどうかをテストします。

インポート

import { isDirectiveResult } from 'lit/directive-helpers.js';

シグネチャ

isDirectiveResult(value): value

パラメータ

value

unknown

値がプリミティブ値であるかどうかをテストします。

インポート

import { isPrimitive } from 'lit/directive-helpers.js';

シグネチャ

isPrimitive(value): value

パラメータ

value

unknown

詳細

https://tc39.github.io/ecma262/#sec-typeof-operatorを参照

パートが、間に補間する文字列のない単一の式のみを持っているかどうかをテストします。

インポート

import { isSingleExpression } from 'lit/directive-helpers.js';

シグネチャ

isSingleExpression(part): boolean

パラメータ

part

PartInfo

詳細

AttributePart および PropertyPart のみ、複数の式を持つことができます。複数式パートには strings プロパティがあり、単一式パートにはありません。

値が TemplateResult であるかどうかをテストします。

インポート

import { isTemplateResult } from 'lit/directive-helpers.js';

シグネチャ

isTemplateResult(value, type?): value

パラメータ

value

unknown

type?

TemplateResultType

ChildPart とそのコンテンツを DOM から削除します。

インポート

import { removePart } from 'lit/directive-helpers.js';

シグネチャ

removePart(part): void

パラメータ

part

ChildPart

削除する Part

Part の値を設定します。

インポート

import { setChildPartValue } from 'lit/directive-helpers.js';

シグネチャ

setChildPartValue(part, value, directiveParent?): T

パラメータ

part

T

設定する Part

value

unknown

設定する値

directiveParent?

DirectiveParent

内部で使用されます。ユーザーは設定しないでください。

詳細

これは、ユーザーが作成した Part (つまり、insertPart を使用して作成した Part) の値を設定/更新するためにのみ使用する必要があることに注意してください。ディレクティブがディレクティブのコンテナ Part の値を設定するために使用するべきではありません。ディレクティブは、Part の状態を更新するために update/render から値を返す必要があります。Part の値を非同期に設定する必要があるディレクティブの場合は、AsyncDirective を拡張し、this.setValue() を呼び出す必要があります。

Part のコミットされた値を、Part のコミット段階をトリガーせずに直接設定します。

インポート

import { setCommittedValue } from 'lit/directive-helpers.js';

シグネチャ

setCommittedValue(part, value?): unknown

パラメータ

part

Part

value?

unknown

詳細

これは、ディレクティブが次の更新で値の変更を検出するかどうかを判断できるように、Part を更新する必要がある場合に便利です。value が省略された場合、次の更新は変更として検出されることが保証されます。

インポート

import { TemplateResultType } from 'lit/directive-helpers.js';

型

値がディレクティブによって処理され、DOM に書き込まれるべきではないことを示す番兵値です。

インポート

import { noChange } from 'lit';

型