DOM のコンポーネントの挿入時または削除時のコードの実行

connectedCallback() ライフサイクルフックは、コンポーネントが DOM に挿入されると起動します。disconnectedCallback() ライフサイクルフックは、コンポーネントが DOM から削除されると起動します。これらのフックは、両方とも親から子の順序で起動します。ホスト要素にアクセスするには、this を使用します。コンポーネントのテンプレート内の要素にアクセスするには、this.template を使用します。

connectedCallback() および disconnectedCallback() は、Web コンポーネント標準に準拠する標準ライフサイクルコールバックです。

connectedCallback() を使用すると、コンポーネントの環境とやりとりできます。たとえば、次のことが可能です。

connectedCallback() フックは、コンポーネントに渡された初期プロパティで呼び出されます。コンポーネントがプロパティから内部状態を取得する場合、connectedCallback() ではなく setter でロジックを作成することをお勧めします。サンプルコードについては、Salesforce エンジニアの Pierre-Marie Dartus によるこの StackExchange 投稿を参照してください。

connectedCallback() フックは、複数回起動できます。たとえば、リストの並べ替え時など、ある要素を削除してから別の位置に挿入する場合は、フックが複数回起動します。コードの実行回数を 1 回にする場合は、2 回実行されないようにコードを作成します。

子要素は、まだ存在していないため、コールバックからアクセスできません。

disconnectedCallback() を使用して、connectedCallback() で行われた作業 (キャッシュの消去やイベントリスナーの削除など) をクリーンアップします。

コンポーネントが DOM に接続されているかどうかを確認するには、this.isConnected を使用してください。

関連トピック