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

仕様書

意味

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

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

著者の要件

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

[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。

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

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

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

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

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

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

[35] これは、要素の作成や CEReactions から呼び出されます。

[44] 格上げ反応upgrade reactionは、 要素の格上げを行うもので、カスタム要素定義を持ちます。 >>45

[46] カスタム要素格上げ反応をキューに追加enqueue a custom element upgrade reactionするには、 要素要素、 カスタム要素定義定義について、次のようにします >>43。

  1. [47] 要素のカスタム要素反応キューに、 定義の格上げ反応を追加します。
  2. [48] 要素について適切な要素キューに要素を追加します。

[49] これは、カスタム要素定義の作成時や、要素の格上げの試行で呼び出されます。

[50] 実行についてはカスタム要素キューを参照。

歴史

[1] Add custom elements to HTML · whatwg/html@6e7eaa4 ( 版) https://github.com/whatwg/html/commit/6e7eaa4bd2912965fd83766f99f984f249531f3a

[2] Add customElements.get() to retrieve a custom element constructor · whatwg/html@1d596a5 ( 版) https://github.com/whatwg/html/commit/1d596a555d3c2f067ae643e447eaa88137b595ac

[58] Make custom element definition trigger in-document upgrades ( (domenic著, )) https://github.com/whatwg/html/commit/11bdd701e79c8dd6040586b5257eb01f3b620659

[59] Editorial: custom element state "customized" → "custom" ( (domenic著, )) https://github.com/whatwg/html/commit/5946d084658ff2f8d5ec3cea3c448175eaa5336e

[61] Fix inaccurate stack-popping in custom element upgrades ( (domenic著, )) https://github.com/whatwg/html/commit/6561250ec3788938a2d64932093b0ea293b97174

[62] Enqueue custom element reactions appropriately during upgrades (domenic著, ) https://github.com/whatwg/html/commit/2328ccf97b80cba7835df3dc5d1a687d51fbfcf4

[63] Don't upgrade custom elements twice (domenic著, ) https://github.com/whatwg/html/commit/5798c66579b8076660178f484568adc67421dc23

[66] Prevent double custom element reaction enqueuing via upgrades (domenic著, ) https://github.com/whatwg/html/commit/657d3b2b97a0fd5ff1c353857f5b052f41bd3e0d

[67] Take care of missing custom element reactions (domenic著, ) https://github.com/whatwg/html/commit/a57c88711c995356e44d019f5bd81d0cdedac2bf

[68] Convert custom element callbacks to Web IDL callback types (domenic著, ) https://github.com/whatwg/html/commit/be055730a11a8f952feb8fdb73e7caa01460e5a4

[69] Fix customized built-in element "is" handling and reactions (domenic著, ) https://github.com/whatwg/html/commit/4e632a82728d68a8a6bd32f02083762b7792ddf7

[37] Set the stage for preventing double custom element constructor calls (domenic著, ) https://github.com/whatwg/dom/commit/539e45214f682797f4fa022815a08b6f044e1240

[38] Prevent double custom element constructor calls (domenic著, ) https://github.com/whatwg/html/commit/04e90c55c7526d8c96d20159bb23586670b93fd2

[71] Implement new custom element adoption semantics (domenic著, ) https://github.com/whatwg/html/commit/feb77d09793a2ed8d49a6949dbca73eabb60ae79

[73] Make document.write etc. throw during parsing custom elements (domenic著, ) https://github.com/whatwg/html/commit/00c6fa07bdb9f0d08a28f6c6e1ababca7d08618c

[75] Make document.write etc. throw during parsing custom elements (domenic著, ) https://github.com/whatwg/html/commit/00c6fa07bdb9f0d08a28f6c6e1ababca7d08618c

[76] Set the custom element state to failed when upgrades misbehave (domenic著, ) https://github.com/whatwg/html/commit/b687759d5eccb354faca78fda5001ce3db428749

[78] Clear the custom element reaction queue if upgrading fails (domenic著, ) https://github.com/whatwg/html/commit/d00b810aeccf9a272b17400ed3daed7f100adec1

[28] Use Web IDL to construct custom element constructors (domenic著, ) https://github.com/whatwg/dom/commit/1ca094a209ba020348ac146c8bda157b7c5f3212

[77] Clarify custom element reaction arguments passed (domenic著, ) https://github.com/whatwg/html/commit/c5019ae75d7dfaaf7829cf45c56700e97b24ea61

[82] Custom Elements Methods Clarification · Issue #2299 · whatwg/html () https://github.com/whatwg/html/issues/2299

[83] Clarify custom element reaction arguments passed by domenic · Pull Request #3125 · whatwg/html () https://github.com/whatwg/html/pull/3125

[84] Fix ordering of custom element upgrade steps (domenic著, ) https://github.com/whatwg/html/commit/2b8a4752415a3a831adf41a97c217963455de220

[86] Elements that are upgrading have no CE definition when callback reactions are enqueued · Issue #2876 · whatwg/html () https://github.com/whatwg/html/issues/2876

[87] Fix ordering of custom element upgrade steps by domenic · Pull Request #3124 · whatwg/html () https://github.com/whatwg/html/pull/3124

[88] Add customElements.upgrade() (domenic著, ) https://github.com/whatwg/html/commit/6df48639fb6d6189a346ea7349f13fd14ace4c99

[95] Add customElements.upgrade() (domenic著, ) https://github.com/whatwg/html/commit/6df48639fb6d6189a346ea7349f13fd14ace4c99

[96] Add `customElements.upgrade` · Issue #710 · w3c/webcomponents () https://github.com/w3c/webcomponents/issues/710

[97] Add customElements.upgrade() by domenic · Pull Request #3535 · whatwg/html () https://github.com/whatwg/html/pull/3535

[98] Fix customElements.upgrade() to use shadow-including tree order (tkent-google著, ) https://github.com/whatwg/html/commit/5b653a9145425b32a4f1c78ffb1a1bda7fde9a6b

[99] custom-element: customElements.upgrade() should use "shadow-including tree order" by tkent-google · Pull Request #3626 · whatwg/html () https://github.com/whatwg/html/pull/3626

[102] Make the type of custom element constructor stricter by yuki3 · Pull Request #3703 · whatwg/html () https://github.com/whatwg/html/pull/3703