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

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

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

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

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

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

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

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

関連トピック

• ライフサイクルフロー