LitElement

属性が変更されたときにプロパティ値を同期します。

パラメータ

name

string

_old

null | string

value

null | string

詳細

具体的には、属性が設定されると、対応するプロパティが設定されます。このコールバックを実装する必要はほとんどありません。このメソッドがオーバーライドされる場合は、super.attributeChangedCallback(name, _old, value)を呼び出す必要があります。attributeChangedCallbackの詳細については、MDNのライフサイクルコールバックの使用を参照してください。

登録されたプロパティに対応する属性のリストを返します。

要素のリアクティブな更新サイクルに参加するためにReactiveControllerを登録します。要素は、ライフサイクルコールバック中に登録されたすべてのコントローラーを自動的に呼び出します。

パラメータ

controller

ReactiveController

詳細

addController()が呼び出されたときに要素が接続されている場合、コントローラーのhostConnected()コールバックがすぐに呼び出されます。

要素からReactiveControllerを削除します。

パラメータ

controller

ReactiveController

このクラスに対して、指定された警告カテゴリを無効にします。

詳細

このメソッドは開発ビルドにのみ存在するため、次のようなガードを使用してアクセスする必要があります。

// Disable for all ReactiveElement subclasses
ReactiveElement.disableWarning?.('migration');
// Disable for only MyElement and subclasses
MyElement.disableWarning?.('migration');

このクラスに対して有効になっているすべての警告カテゴリを読み取りまたは設定します。

詳細

このプロパティは開発ビルドでのみ使用されます。

このクラスに対して、指定された警告カテゴリを有効にします。

詳細

このメソッドは開発ビルドにのみ存在するため、次のようなガードを使用してアクセスする必要があります。

// Enable for all ReactiveElement subclasses
ReactiveElement.enableWarning?.('migration');
// Enable for only MyElement and subclasses
MyElement.enableWarning?.('migration');

コンポーネントがドキュメントのDOMに追加されたときに呼び出されます。

詳細

connectedCallback()では、要素がドキュメントに接続された場合にのみ発生する必要があるタスクを設定する必要があります。最も一般的なのは、ウィンドウに追加されたkeydownイベントハンドラーなど、要素の外部のノードへのイベントリスナーの追加です。

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

通常、connectedCallback()で実行されたことは、要素が切断されたときにdisconnectedCallback()で元に戻す必要があります。

コンポーネントがドキュメントのDOMから削除されたときに呼び出されます。

詳細

このコールバックは、要素がもはや使用されない可能性があることを示す主なシグナルです。disconnectedCallback()は、要素への参照を保持しているものがないことを（要素の外部のノードに追加されたイベントリスナーなど）確認して、ガベージコレクションの対象となるようにする必要があります。

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

要素は、切断後に再接続される可能性があります。

インスタンスの構築中に呼び出されるイニシャライザー関数をクラスに追加します。

パラメータ

initializer

イニシャライザー

詳細

これは、デコレーターなどのReactiveElementサブクラスに対して実行され、ReactiveControllerの設定など、各インスタンスに対して処理を行う必要があるコードに役立ちます。

const myDecorator = (target: typeof ReactiveElement, key: string) => {
  target.addInitializer((instance: ReactiveElement) => {
    // This is run during construction of the element
    new MyController(instance);
  });
}

フィールドをデコレートすると、各インスタンスでコントローラーを追加するイニシャライザーが実行されるようになります

class MyElement extends LitElement {
  @myDecorator foo;
}

イニシャライザーはコンストラクターごとに保存されます。サブクラスにイニシャライザーを追加しても、スーパークラスに追加されるわけではありません。イニシャライザーはコンストラクターで実行されるため、イニシャライザーは、スーパークラスから開始してインスタンスのクラスに進む、クラス階層の順序で実行されます。

登録されたプロパティのプロパティアクセサーを作成し、要素のスタイルを設定し、すべてのスーパークラスもファイナライズされていることを確認します。要素がファイナライズされた場合はtrueを返します。

このクラスがfinalizedとしてマークされていることを確認し、finalizeを不必要に試行しないようにする最適化として使用します。

詳細

このプロパティ名が文字列であるのは、Closure JSコンパイラの最適化を妨げないようにするためです。詳細は@lit/reactive-elementを参照してください。

要素のプロトタイプにプロパティアクセサが存在しない場合は作成し、指定されたオプションを持つプロパティのPropertyDeclarationを格納します。プロパティセッターは、プロパティのhasChangedプロパティオプションを呼び出すか、厳密な同一性チェックを使用して、更新をリクエストするかどうかを判断します。

パラメータ

name

PropertyKey

options?

PropertyDeclaration<unknown, unknown>

詳細

このメソッドはプロパティをカスタマイズするためにオーバーライドできます。ただし、その際には、プロパティが正しく設定されるように、必ずsuper.createPropertyを呼び出すことが重要です。このメソッドは内部でgetPropertyDescriptorを呼び出して、インストールする記述子を取得します。プロパティのgetまたはset時に何をするかをカスタマイズするには、getPropertyDescriptorをオーバーライドします。プロパティのオプションをカスタマイズするには、次のようにcreatePropertyを実装します。

static createProperty(name, options) {
  options = Object.assign(options, {myOption: true});
  super.createProperty(name, options);
}

すべての要素プロパティ（スーパークラスのプロパティを含む）のメモ化されたリスト。ユーザーサブクラスでクラスをファイナライズするときに、遅延的に作成されます。

指定された名前付きプロパティに定義されるプロパティ記述子を返します。記述子が返されない場合、プロパティはアクセサになりません。例えば、

パラメータ

name

PropertyKey

key

string | symbol

options

PropertyDeclaration<unknown, unknown>

詳細

class MyElement extends LitElement {
  static getPropertyDescriptor(name, key, options) {
    const defaultDescriptor =
        super.getPropertyDescriptor(name, key, options);
    const setter = defaultDescriptor.set;
    return {
      get: defaultDescriptor.get,
      set(value) {
        setter.call(this, value);
        // custom action.
      },
      configurable: true,
      enumerable: true
    }
  }
}

指定されたプロパティに関連付けられたプロパティオプションを返します。これらのオプションは、propertiesオブジェクトまたは@propertyデコレータを介してPropertyDeclarationで定義され、createProperty(...)に登録されます。

パラメータ

name

PropertyKey

詳細

このメソッドは「最終」と見なすべきで、オーバーライドしないでください。特定のプロパティのオプションをカスタマイズするには、createPropertyをオーバーライドします。

リアクティブプロパティの設定オプションを含むPropertyDeclarationオブジェクトへのプロパティ名をマッピングする、ユーザー提供のオブジェクト。リアクティブプロパティが設定されると、要素が更新され、レンダリングされます。

詳細

デフォルトでは、プロパティはパブリックフィールドであり、属性またはプロパティ自体を介して、主に要素ユーザーが設定可能であると見なされるべきです。一般に、要素によって変更されるプロパティは、プライベートまたはプロテクトされたフィールドであり、state: trueオプションを使用する必要があります。stateとマークされたプロパティは、対応する属性から反映されません。ただし、要素コードがパブリックプロパティを設定する必要がある場合もあります。これは通常、ユーザーの操作に応じてのみ行われるべきであり、ユーザーに通知するイベントを発生させる必要があります。例えば、チェックボックスはクリックされるとcheckedプロパティを設定し、changedイベントを発生させます。パブリックプロパティの変更は、通常、プリミティブでない（オブジェクトまたは配列）プロパティには行うべきではありません。要素が状態を管理する必要があるその他のケースでは、state: trueオプションで設定されたプライベートプロパティを使用する必要があります。必要な場合、状態プロパティは、複雑な相互作用を容易にするために、パブリックプロパティを介して初期化できます。

レンダリングタスクを実行するために、各更新時に呼び出されます。このメソッドは、lit-htmlのChildPartでレンダリング可能な任意の値を返すことができます。通常はTemplateResultです。このメソッド内でプロパティを設定しても、要素の更新はトリガーされません。

要素DOMをレンダリングするノードまたはShadowRoot。デフォルトでは、オープンなshadowRootになります。

attachShadowを呼び出すときに使用されるオプション。このプロパティを設定してshadowRootのオプションをカスタマイズします。例えば、クローズドなshadowRootを作成するには、{mode: 'closed'}とします。

詳細

これらのオプションはcreateRenderRootで使用されることに注意してください。このメソッドがカスタマイズされている場合は、可能であればオプションを尊重する必要があります。

すべての要素スタイルのメモ化されたリスト。ユーザーサブクラスでクラスをファイナライズするときに、遅延的に作成されます。

ユーザーがstatic stylesプロパティを介して提供したスタイルを取得し、要素に適用するスタイルの配列を返します。スタイル管理システムに統合するには、このメソッドをオーバーライドします。

パラメータ

styles?

CSSResultGroup

詳細

スタイルは、リストの最後のインスタンスを保持して重複排除されます。これは、特にサブクラス化を介して構成する場合に発生する可能性がある重複したスタイルを回避するためのパフォーマンス最適化です。最後の項目は、最後に追加されたスタイルが前のスタイルをオーバーライドするという前提で、カスケード順序を保持しようとするために保持されます。

要素に適用するスタイルの配列。スタイルは、cssタグ関数を使用するか、構築可能なスタイルシートを介して定義するか、ネイティブCSSモジュールスクリプトからインポートする必要があります。

詳細

コンテンツセキュリティポリシーに関する注意: ブラウザがadopted StyleSheetsをサポートしていない場合、要素スタイルは<style>タグで実装されます。style-src CSPディレクティブでこのような<style>タグを使用するには、style-src値に 'unsafe-inline' またはnonce-<base64-value>を含める必要があります。<base64-value>は、サーバーで生成されたnonceで置き換えられます。生成された<style>要素で使用するnonceを提供するには、アプリケーションコードをロードする前に、ページのHTMLでサーバー生成されたnonceをwindow.litNonceに設定します。

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

注意: このメソッドは最終的なものとして扱われるべきであり、オーバーライドすべきではありません。最初の更新をトリガーする関数で、要素インスタンス上でオーバーライドされます。

パラメータ

_requestedUpdate

boolean

要素が最初に更新されたときに呼び出されます。更新後の要素に対して一度だけ実行する処理を実装します。

パラメータ

_changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

変更されたプロパティとその古い値のマップ

詳細

firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

このメソッド内でプロパティを設定すると、この更新サイクルが完了した後、要素が再度更新されます。

updateComplete プロミスのオーバーライドポイントです。

詳細

TypeScript の制限により、ターゲット言語が ES5 の場合、スーパークラスのゲッター (例: `super.updateComplete.then(...)`) を呼び出すことができないため、`updateComplete` ゲッターを直接オーバーライドすることは安全ではありません (https://github.com/microsoft/TypeScript/issues/338)。代わりに、このメソッドをオーバーライドする必要があります。例:

class MyElement extends LitElement {
  override async getUpdateComplete() {
    const result = await super.getUpdateComplete();
    await this._myChild.updateComplete;
    return result;
  }
}

最初の更新後に true に設定されます。要素コードは、要素が `hasUpdated` される前に `renderRoot` が存在すると仮定することはできません。

requestUpdate() の呼び出しの結果として、保留中の更新がある場合は true。読み取り専用である必要があります。

要素の更新を実行します。注意: 更新中に例外がスローされた場合、`firstUpdated` および `updated` は呼び出されません。

詳細

保留中の更新をすぐに処理するには、`performUpdate()` を呼び出します。これは一般的には必要ありませんが、同期的に更新する必要があるまれなケースで実行できます。注意: `performUpdate()` が保留中の更新を同期的に完了させることを保証するために、オーバーライドすべきではありません。LitElement 2.x では、更新スケジュールをカスタマイズするために `performUpdate()` をオーバーライドすることが推奨されていました。代わりに、`scheduleUpdate()` をオーバーライドする必要があります。LitElement 2.x との下位互換性のため、`performUpdate()` を介した更新のスケジュールは引き続き機能しますが、同期的に更新を処理するために `performUpdate()` を呼び出すことも難しくなります。

非同期的に処理される更新を要求します。これは、リアクティブプロパティの設定によってトリガーされない何らかの状態に基づいて要素を更新する必要がある場合に呼び出す必要があります。この場合、引数を渡さないでください。また、プロパティセッターを手動で実装する場合にも呼び出す必要があります。この場合、構成されたプロパティオプションが確実に尊重されるように、プロパティの `name` と `oldValue` を渡します。

パラメータ

name?

PropertyKey

要求元のプロパティの名前

oldValue?

unknown

要求元のプロパティの古い値

options?

PropertyDeclaration<unknown, unknown>

以前に構成されたオプションの代わりに使用するプロパティオプション

要素の更新をスケジュールします。Promise を返すことで更新のタイミングを変更するために、このメソッドをオーバーライドできます。更新は返された Promise を待機し、更新を進めるには Promise を解決する必要があります。このメソッドがオーバーライドされている場合は、`super.scheduleUpdate()` を呼び出す必要があります。

詳細

たとえば、次のフレームの直前に更新が発生するようにスケジュールするには

override protected async scheduleUpdate(): Promise<unknown> {
  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
  super.scheduleUpdate();
}

要素が更新を要求したときに、`update()` を呼び出すかどうかを制御します。デフォルトでは、このメソッドは常に `true` を返しますが、更新のタイミングを制御するためにカスタマイズできます。

パラメータ

_changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

変更されたプロパティとその古い値のマップ

要素を更新します。このメソッドは、プロパティ値を属性に反映し、`render` を呼び出して lit-html を介して DOM をレンダリングします。このメソッド内でプロパティを設定しても、別の更新はトリガーされません。

パラメータ

changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

変更されたプロパティとその古い値のマップ

要素の更新が完了したときに解決される Promise を返します。Promise 値は、要素が別の更新をトリガーすることなく更新を完了した場合に `true` になるブール値です。`updated()` 内でプロパティが設定された場合、Promise の結果は `false` です。Promise が拒否された場合、更新中に例外がスローされました。

詳細

追加の非同期処理を待機するには、`getUpdateComplete` メソッドをオーバーライドします。たとえば、この Promise を満たす前に、レンダリングされた要素を待機すると便利な場合があります。これを行うには、最初に `super.getUpdateComplete()` を待機してから、後続の状態を待機します。

要素が更新されるたびに呼び出されます。DOM API を介して更新後のタスクを実行するために実装します (たとえば、要素にフォーカスを設定するなど)。

パラメータ

_changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

変更されたプロパティとその古い値のマップ

詳細

このメソッド内でプロパティを設定すると、この更新サイクルが完了した後、要素が再度更新されます。

更新中に必要な値を計算するために `update()` の前に呼び出されます。

パラメータ

_changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

詳細

`willUpdate` を実装して、他のプロパティに依存し、更新プロセスの残りの部分で使用されるプロパティ値を計算します。

willUpdate(changedProperties) {
  // only need to check changed properties for an expensive computation.
  if (changedProperties.has('firstName') || changedProperties.has('lastName')) {
    this.sha = computeSHA(`${this.firstName} ${this.lastName}`);
  }
}
render() {
  return html`SHA: ${this.sha}`;
}

テンプレートのクローンに使用されるノード (このノードで `importNode` が呼び出されます)。これにより、レンダリングされた DOM の `ownerDocument` と、継承されたコンテキストが制御されます。デフォルトはグローバルな `document` です。

イベントリスナーの `this` 値として使用するオブジェクト。テンプレートをレンダリングするホストコンポーネントにこれを設定すると便利なことがよくあります。

レンダリングされるトップレベルのパートの初期接続状態。isConnectedオプションが設定されていない場合、AsyncDirectiveはデフォルトで接続されます。最初のレンダリングが非接続ツリーで発生し、AsyncDirectiveが最初のレンダリングでisConnected === falseとなるようにする必要がある場合は、falseを設定します。パートの接続状態を変更するには、最初のレンダリング後にpart.setConnected()メソッドを使用する必要があります。

コンテナ内のコンテンツをレンダリングする前に置くDOMノード。