カスタム要素コンストラクター

[60] カスタム要素構築器 (コンストラクター) (custom element constructor) は、カスタム要素が作成された時に実行される JavaScript の関数です。カスタム要素を定義する際に (著者が) 指定できます。

意味

[15] カスタム要素構築器 (custom element constructor) は、カスタム要素の構築器 (コンストラクター) です >>14。カスタム要素構築器は、 (通常の要素のように利用者エージェントが定義するのではなく) 著者が定義します。

[16] カスタム要素構築器は、いくつかの条件を満たさなければならないことを除けば、普通の JavaScript の構築器と変わりありません。つまり、単なる JavaScript の関数です。

著者の要件

[4] 著者は、カスタム要素構築器について、次の条件を満たさなければなりません >>3。

[5] 構築器本体の最初の文として、引数なしで super を呼び出しする。
- [6] これは、他のコードの実行前に正しいプロトタイプ鎖と this 値を確立するものです。
[7] return 文は、単純な early-return (return または return this) の場合を除き、構築器本体中で使わない。
[8] 内容属性や内容を検査しない。
- [9] 格上げでない場合には内容属性や内容は現れません。格上げの時にしか使えない要素は不便です。
[10] 内容属性や内容を設定しない。
- [11] createElement や createElementNS の呼び出し側の期待に反するからです。
[74] document.open や document.write を使わない。

[13] 一般に、構築器は、初期状態や既定値の設定、イベントリスナーや影ホストの設定に使うべきです。 >>3

[12] 一般に、処理 (特に fetch やレンダリングを伴うもの) はできるだけ構築器ではなく、 connectedCallback を使うべきです。ただし、 connectedCallback は何度も実行されることがありますから、本当に一度だけ実行したい初期化作業は対策が必要になります。 >>3

`CustomElementConstructor` 型

[100] Web IDL の typedef CustomElementConstructor は、 any を返す関数です HTML Standard。つまり任意の値を返す関数を表しています。

[101] define メソッドで使われています。

構築器 (カスタム要素定義)

[18] カスタム要素定義は、構築器 (constructor) を持ちます >>17。構築器は、カスタム要素構築器です >>17。

[56] 構築器は、次の場面で呼び出されます。

[57] 他に、 define で重複検査やプロパティーの参照のためにアクセスされます。

格上げ

[51] カスタム要素の条件を潜在的に満たす要素を、実際にカスタム要素とする操作を、要素の格上げといいます。要素の格上げは、次の場面で、適切なカスタム要素定義が存在する場合に行われます。

[55] 要素の格上げによって、元々 HTMLElement を実装していた要素オブジェクトは、カスタム要素構築器の実行を経てカスタム要素のクラスのオブジェクトになります。

[89] CustomElementRegistry インターフェイスの upgrade メソッドは、 CEReactions であり、次のようにしなければなりません >>19。

[90] 根を、第1引数を Node として解釈した結果に設定します。
[91] 候補群を、 根の影を含む包括的子孫の要素すべての影を含む木順のリストに設定します。
[92] 候補群の各候補について、順に、
1. [93] 候補の要素の格上げの試行を行います。

[36] 要素の格上げの試行 (try to upgrade an element) は、要素要素について、次のようにします >>19。

[39] 定義を、要素の節点文書、要素の名前空間、 要素の局所名、要素のis値についてカスタム要素定義を探す処理を実行した結果に設定します。
[40] 定義が null でない場合、
1. [41] 要素と定義について、 enqueue a custom element upgrade reaction を実行します。

[42] これは、upgrade の他、挿入から呼び出されます。

[20] 要素の格上げ (upgrade an element) は、カスタム要素定義定義と要素要素について、次のようにします >>19。

[64] 要素がカスタムか要素のカスタム要素状態が failed なら、
1. [65] ここで停止します。
[72] 要素のカスタム要素定義を、定義に設定します。
[31] 要素の属性リストの各属性について順に、
1. [32] enqueue a custom element callback reaction を実行します。
  要素
  要素
  コールバック名
  attributeChangedCallback
  引数リスト
  属性の局所名
  null
  属性の値
  属性の名前空間
[33] 要素が影を含む文書中なら、
1. [34] enqueue a custom element callback reaction を実行します。
  要素
  要素
  コールバック名
  connectedCallback
  引数リスト
  空
[21] 要素を、定義の構築スタックの末尾に追加します。
[22] 構築器を、定義の構築器に設定します。
[23] 結果を、構築器について構築した結果に設定します。 (例外が投げられることもあります。)
[27] 結果が例外が投げられたことを表していなければ、
1. [80] SameValue(結果, 要素) が偽の場合、
  - [29] これは、 >>5 や >>7 に違反すると発生することがあります。
  1. [79] 結果を、 InvalidStateError 例外が投げられたとします。
[24] 定義の構築スタックの末尾の項目を削除します。
[25] 結果が例外が投げられたことを表していれば、
1. [70] 要素のカスタム要素状態を、 failed に設定します。
2. [85] 要素のカスタム要素定義を、 null に設定します。
3. [81] 要素のカスタム要素反応キューを、空にします。
4. [26] 結果の例外を投げ、ここで停止します。
[30] 要素のカスタム要素状態を、 custom に設定します。