コンポーネント作成時のコードの実行

コンポーネントインスタンスの作成時に constructor() メソッドが起動されます。作成時に属性をホスト要素に追加しないでください。これ以外であれば、どのライフサイクルフックでも属性をホスト要素に追加できます。

コンストラクタは、親から子の順序で実行されます。

constructor() には、「HTML: Custom elements spec (HTML: カスタム要素の仕様)」からの次の要件が適用されます。

最初のステートメントは super() にする必要があります。パラメータは指定しません。このコールにより、this の正しいプロトタイプチェーンと値が設定されます。必ず super() をコールしてから this を操作してください。
return ステートメントは、単純なアーリーリターン (return または return this) でない場合は、コンストラクタの本体内で使用しないでください。
document.write() メソッドや document.open() メソッドは使用しないでください。
要素の属性と子は、まだ存在していないため、検査しないでください。
要素の公開プロパティは、コンポーネントの作成後に設定されるため、検査しないでください。

作成時に属性をホスト要素に追加しないでください

属性は、コンポーネントライフサイクルのうち、作成時を除くどのステージでもホスト要素に追加できます。

次の例は、constructor() で属性がホスト要素に追加されるため、問題があります。

1// don't do this
2import { LightningElement } from "lwc";
3export default class Deprecated extends LightningElement {
4  constructor() {
5    super();
6    this.classList.add("new-class");
7  }
8}

次の例は、connectedCallback() で属性がホスト要素に追加されるため、問題ありません。

1import { LightningElement } from "lwc";
2
3export default class New extends LightningElement {
4  connectedCallback() {
5    this.classList.add("new-class");
6  }
7}

関連トピック

ライフサイクルフロー

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。