ReactiveElement

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

パラメータ

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');

最初の接続時に、要素のrenderRootを作成し、要素のスタイリングを設定し、更新を有効にします。

将来のある時点で接続を解除するときに、非破壊的な機能追加の可能性を確保しながら、拡張機能でsuper.disconnectedCallback()を許可します。

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

パラメータ

initializer

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を返します。

クラスをプロパティの作成を完了したものとしてマークします。

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

パラメータ

name

PropertyKey

options?

PropertyDeclaration<unknown, unknown>

詳細

このメソッドは、プロパティをカスタマイズするためにオーバーライドできます。ただし、その場合は、プロパティが正しく設定されていることを確認するためにsuper.createPropertyを呼び出すことが重要です。このメソッドは、内部的にgetPropertyDescriptorを呼び出して、インストールするディスクリプタを取得します。プロパティが取得または設定されたときの動作をカスタマイズするには、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オプションで設定されたプライベートプロパティを使用する必要があります。必要な場合、状態プロパティは複雑な相互作用を容易にするためにパブリックプロパティを介して初期化できます。

要素がレンダリングされるノードを返し、デフォルトでは、オープンなshadowRootを作成して返します。要素のDOMがレンダリングされる場所をカスタマイズするために実装します。たとえば、要素のchildNodesにレンダリングするには、thisを返します。

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

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

詳細

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

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

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

パラメータ

styles?

CSSResultGroup

詳細

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

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

詳細

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

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

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

パラメータ

_requestedUpdate

boolean

要素が最初に更新されたときに呼び出されます。更新後に要素で1回限りの作業を実行するために実装します。

パラメータ

_changedProperties

Map<PropertyKey, unknown> | PropertyValueMap<any>

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

詳細

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

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

updateComplete Promise のオーバーライドポイントです。

詳細

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

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?

不明

リクエストしているプロパティの古い値

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>

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

要素を更新します。このメソッドは、プロパティ値を属性に反映します。レンダリングしたり、更新された要素 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}`;
}

属性値をプロパティ値に変換するために呼び出されます。

パラメータ

value

null | string

type?

TypeHint

プロパティ値を属性値に変換するために呼び出されます。

パラメータ

value

Type

type?

TypeHint

詳細

https://github.com/WICG/trusted-types (および同様の取り組み) との互換性を保つために、string の代わりに unknown を返します。

プロパティがどのように、そして観察される属性になるかどうかを示します。値が false の場合、プロパティは observedAttributes に追加されません。true または不在の場合、小文字のプロパティ名が観察されます（例：fooBar は foobar になります）。文字列の場合、文字列値が観察されます（例：attribute: 'foo-bar'）。

属性とプロパティ間の変換方法を示します。この値が関数の場合、属性値をプロパティ値に変換するために使用されます。オブジェクトの場合、fromAttribute と toAttribute のキーを持つことができます。toAttribute 関数が提供されておらず、reflect が true に設定されている場合、プロパティ値は属性に直接設定されます。デフォルトの converter は、提供されていない場合に使用されます。これは、Boolean、String、Number、Object、および Array をサポートします。プロパティが変更され、コンバーターを使用して属性を更新する場合、属性の変更の結果としてプロパティが再度更新されることは決してないことに注意してください。その逆も同様です。

このプロパティに対してアクセサを作成するかどうかを示します。デフォルトでは、このプロパティに対して、設定時に更新を要求するアクセサが生成されます。このフラグが true の場合、アクセサは作成されず、プロパティが変更されたときに更新を要求するために、ユーザーが this.requestUpdate(propertyName, oldValue) を呼び出す必要があります。

プロパティを属性に反映させるかどうかを示します。true の場合、プロパティが設定されると、attribute プロパティオプションのルールに従って決定された属性名と、converter プロパティオプションのルールに従って変換されたプロパティの値を使用して、属性が設定されます。

true に設定すると、プロパティが内部プライベート状態であることを示します。このプロパティはユーザーが設定すべきではありません。TypeScript を使用する場合、このプロパティは private または protected としてマークする必要があり、名前の先頭に _ を使用するのが一般的です。このプロパティは observedAttributes には追加されません。

プロパティの型を示します。これは、属性をプロパティとの間でどのように変換するかを決定するために、converter へのヒントとしてのみ使用されます。

プロパティが設定されたときに、変更されたと見なすかどうかを示す関数。この関数は、newValue と oldValue を受け取り、更新を要求する必要がある場合は true を返す必要があります。

パラメータ

value

Type

oldValue

Type