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

connectedCallback() ライフサイクルフックは、コンポーネントが DOM に挿入されると起動します。disconnectedCallback() ライフサイクルフックは、コンポーネントが DOM から削除されると起動します。

これらのフックは、両方とも親から子の順序で起動します。子要素は、まだ存在していないため、コールバックからアクセスできません。ホスト要素にアクセスするには、this を使用します。コンポーネントのテンプレート内の要素にアクセスするには、this.template を使用します。

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

• 現在のドキュメントやコンテナとの通信を確立し、環境に対する動作を調整する。
• データの取得、キャッシュの設定などの初期化タスクを実行したり、イベントをリスニングしたりする。
• メッセージチャネルを登録および登録解除する。

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

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

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

関連トピック

• ライフサイクルフロー
• DOM 全体での通信