カスタム要素 — Custom elements

4.13.1. 序論

`~custom要素$は、作者に， “全装備の” ~DOM要素を自前で築く仕方を供する。 作者は常に自身の文書に非~標準の要素を利用して，~scripting等が起きた後に~app特有の挙動を追加することもできるが、そのような要素は，歴史的に非~適合とされてきており，また 機能~面でも不足である。 ~custom要素を`定義-$することにより、作者は，要素を適正に構築する方法, および その類の要素が変化に対しどう反応すべきか，を構文解析器に伝えれるようになる。 ◎ Custom elements provide a way for authors to build their own fully-featured DOM elements. Although authors could always use non-standard elements in their documents, with application-specific behavior added after the fact by scripting or similar, such elements have historically been non-conforming and not very functional. By defining a custom element, authors can inform the parser how to properly construct an element and how elements of that class should react to changes.

~custom要素は、（~HTMLの要素の様な）既存の~platform特色機能を［ 低levelの，作者~向けに公開される拡張可能点（~custom要素~定義の様な） ］を通して説明することにより、より大きな， “~platformを合理化する” ~~活動の一環を成す。 今日の~custom要素の能力には まだ制限が多く、~HTMLの既存の要素の挙動を — 機能, 意味論の両面で — 全部的には説明できないが、この隔たりは，時を経るうちに埋められるものと期待0されている。 ◎ Custom elements are part of a larger effort to "rationalise the platform", by explaining existing platform features (like the elements of HTML) in terms of lower-level author-exposed extensibility points (like custom element definition). Although today there are many limitations on the capabilities of custom elements—both functionally and semantically—that prevent them from fully explaining the behaviors of HTML's existing elements, we hope to shrink this gap over time.

<flag-icon country="nl"></flag-icon>

class FlagIcon extends HTMLElement {
  constructor() {
    super();
    this._countryCode = null;
  }

  static get observedAttributes() { return ["country"]; }

  attributeChangedCallback(%name, %oldValue, %newValue) {
    /* 
%name は常に， `observedAttributes^jc が返す結果のどれか（ここでは `country^l のみ）
◎
name will always be "country" due to observedAttributes
 */
    this._countryCode = %newValue;
    this._updateRendering();
  }
  connectedCallback() {
    this._updateRendering();
  }

  get country() {
    return this._countryCode;
  }
  set country(%v) {
    this.setAttribute("country", %v);
  }

  _updateRendering() {
/* 
読者への演習に残しておく。
が，おそらく、
`this.ownerDocument.defaultView^m で，挿入-先の文書が`属する閲覧文脈$があるかどうか検査して、ないなら何もしないことが求められるであろう。
◎
Left as an exercise for the reader. But, you'll probably want to check this.ownerDocument.defaultView to see if we've been inserted into a document with a browsing context, and avoid doing any work if not.
 */
  }
}

`customElements$m.define("flag-icon", FlagIcon);

const %flagIcon = document.createElement("flag-icon")
%flagIcon.country = "jp"
document.body.appendChild(%flagIcon)

const %flagIcon = new FlagIcon()
%flagIcon.country = "jp"
document.body.appendChild(%flagIcon)

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      /* 
何か気の利いた~animation効果を描く
◎
Draw some fancy animation effects!
 */
    });
  }
}

`customElements$m.define("plastic-button", PlasticButton, { extends: "button" });

<button `is$a="plastic-button">Click Me!</button>

const %plasticButton = document.createElement("button", { is: "plastic-button" });
%plasticButton.textContent = "Click me!";

const %plasticButton2 = new PlasticButton();
console.log(%plasticButton2.localName);  /* 
`button^l と出力される
◎
will output "button"
 */
console.assert(%plasticButton2 instanceof PlasticButton);
console.assert(%plasticButton2 instanceof HTMLButtonElement);

console.assert(!%plasticButton.hasAttribute("is"));
console.log(%plasticButton.outerHTML); /* 
`<button is="plastic-button"></button>^l
と出力される
◎
will output '<button is="plastic-button"></button>'
 */

class TacoButton extends HTMLElement {
  static get observedAttributes() { return ["disabled"]; }

  constructor() {
    super();

    this.addEventListener("keydown", %e => {
      if (%e.keyCode === 32 || %e.keyCode === 13) {
        this.dispatchEvent(new MouseEvent("click", {
          bubbles: true,
          cancelable: true
        }));
      }
    });

    this.addEventListener("click", %e => {
      if (this.disabled) {
        %e.preventDefault();
        %e.stopPropagation();
      }
    });

    this._observer = new MutationObserver(() => {
      this.setAttribute("aria-label", this.textContent);
    });
  }

  connectedCallback() {
    this.setAttribute("role", "button");
    this.setAttribute("tabindex", "0");

    this._observer.observe(this, {
      childList: true,
      characterData: true,
      subtree: true
    });
  }

  disconnectedCallback() {
    this._observer.disconnect();
  }

  get disabled() {
    return this.hasAttribute("disabled");
  }

  set disabled(%v) {
    if (%v) {
      this.setAttribute("disabled", "");
    } else {
      this.removeAttribute("disabled");
    }
  }

  attributeChangedCallback() {
/* 
`observedAttributes^jc に因り
`disabled^a 属性に対してのみ~callされる
◎
only is called for the disabled attribute due to observedAttributes
 */
    if (this.disabled) {
      this.removeAttribute("tabindex");
      this.setAttribute("aria-disabled", "true");
    } else {
      this.setAttribute("tabindex", "0");
      this.setAttribute("aria-disabled", "false");
    }
  }
}

<!DOCTYPE html>
<html lang="ja">
<title>画像~viewerの例</title>

<img-viewer filter="Kelvin">
  <img src="images/tree.jpg" alt="何もないサバンナにそびえる美しい~~木">
</img-viewer>

<script src="js/elements/img-viewer.js" async></script>

<!DOCTYPE html>
<html lang="en">
<title>昇格の際どい事例</title>

<example-element></example-element>

<script>
  "use strict";

  const %文書内 = document.querySelector("example-element");
  const %文書外 = document.createElement("example-element");

  /* 
要素~定義の前：
両者とも `HTMLElement^I ：
◎
Before the element definition, both are HTMLElement:
 */
  console.assert(%文書内 instanceof HTMLElement);
  console.assert(%文書外 instanceof HTMLElement);

  class ExampleElement extends HTMLElement {}
  `customElements$m.define("example-element", ExampleElement);

  /* 
要素~定義の後：
文書~内にあった方の要素は，この時点で昇格されている：
◎
After element definition, the in-document element was upgraded:
 */
  console.assert(%文書内 instanceof ExampleElement);
  console.assert(!(%文書外 instanceof ExampleElement));

  document.body.appendChild(%文書外);

  /* 
そうでない方の要素を文書の中に移動した後には，それも昇格される：
◎
Now that we've moved the element into the document, it too was upgraded:
 */
  console.assert(%文書外 instanceof ExampleElement);
</script>

4.13.3. 中核~概念

`~custom要素@ は、`~customである$要素である†。 これは，非公式に言えば、その構築子と~prototypeが，~UAに代わって 作者により定義されることを意味する。 作者が給する，この構築子~関数は、 `~custom要素~構築子@ と呼ばれる。 ◎ A custom element is an element that is custom. Informally, this means that its constructor and prototype are defined by the author, instead of by the user agent. This author-supplied constructor function is called the custom element constructor.

【† すなわち，昇格される前は、まだ “~customでない” 】

次の 2 つの別個の種別の，`~custom要素$を定義できる： ◎ Two distinct types of custom elements can be defined:

1. `自律的~custom要素@ （ `autonomous custom element^en ）は、 `extends^jc ~optionを伴わずに定義されるものである。 この種別の~custom要素の局所~名は、それに定義された`名前$cDに等しくなる。 ◎ An autonomous custom element, which is defined with no extends option. These types of custom elements have a local name equal to their defined name.
2. `~custom化された組込みの要素@ （ `customized built-in element^en ）は、 `extends^jc ~optionを伴って定義されるものである。 この種別の~custom要素の局所~名は，その `extends^jc ~optionに渡される値に等しくなり、それに定義された`名前$cDは `is@a 属性の値として利用される — したがって、値は`妥当な~custom要素~名$で~MUST。 ◎ A customized built-in element, which is defined with an extends option. These types of custom elements have a local name equal to the value passed in their extends option, and their defined name is used as the value of the is attribute, which therefore must be a valid custom element name.

`~custom要素$が`作成-$された後に `is$a 属性の値を変更しても，［ `~is0値$として要素に保存-済みの，要素の挙動 ］は変化しない。 ◎ After a custom element is created, changing the value of the is attribute does not change the element's behavior, as it is saved on the element as its is value.

`自律的~custom要素$の 要素~定義 は、次で与えられる： ◎ Autonomous custom elements have the following element definition:

`分類$：

`~flow内容$／`句内容$／`可触~内容$ ◎ Flow content. ◎ Phrasing content. ◎ Palpable content.

`この要素を利用できる文脈$：

`句内容$が期待される所。 ◎ Where phrasing content is expected.

`内容~model$：

`透過的$。 ◎ Transparent.

`内容~属性$：

`大域~属性$ — ただし、 `is$a 属性は除く。 ◎ Global attributes, except the is attribute

他の，どの名前空間にも属さない任意の属性（注釈文を見よ）。 ◎ Any other attribute that has no namespace (see prose).

`~DOM~interface$：

要素の作者が給する（ `HTMLElement$I を継承する）。 ◎ Supplied by the element's author (inherits from HTMLElement)

`自律的~custom要素$は、特別な意味を有さず，その子たちを`表現-$する。 `~custom化された組込みの要素$は、それが拡張する要素の意味論を継承する。 ◎ An autonomous custom element does not have any special meaning: it represents its children. A customized built-in element inherits the semantics of the element that it extends.

`~custom化された組込みの要素$の属性は、それが拡張する要素に基づく通常の要件に従う。 ~custom属性に基づく挙動を追加するためには、 `data-*$a 属性を利用する。 ◎ Customized built-in elements follow the normal requirements for attributes, based on the elements they extend. To add custom attribute-based behavior, use data-* attributes.

`妥当な~custom要素~名@ は、次の両~要件を満たす文字~並びである： ◎ A valid custom element name is a sequence of characters name that meets all of the following requirements:

• `PotentialCustomElementName$P 生成規則に合致し~MUST： ◎ name must match the PotentialCustomElementName production:

  `PotentialCustomElementName@P ::=

  [a-z] (`PCENChar$P)* '-' (`PCENChar$P)*

  `PCENChar@P ::=

  "-" | "." | [0-9] | "_" | [a-z] | #xB7 | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x203F-#x2040] | [#x2070-#x218F] | [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF]

  この生成規則は、 `XML$r 仕様の `EBNF 記法$を利用している。 ◎ This uses the EBNF notation from the XML specification. [XML]

• 次のいずれにも該当しては~MUST_NOT： ◎ name must not be any of the following:

  • `annotation-xml^l
  • `color-profile^l
  • `font-face^l
  • `font-face-src^l
  • `font-face-uri^l
  • `font-face-format^l
  • `font-face-name^l
  • `missing-glyph^l

  注記： 上に挙げた名前は、`適用-可能な仕様$ — すなわちここでは `SVG$r, `MATHML$r — に定義される要素のうち，~hyphenを包含するものすべてを要約したものである。 ◎ The list of names above is the summary of all hyphen-containing element names from the applicable specifications, namely SVG and MathML. [SVG] [MATHML]

`~custom要素~定義@ は、`~custom要素$を記述し，次のものからなる： ◎ A custom element definition describes a custom element and consists of:

`名前@cD ◎ A name

`妥当な~custom要素~名$ ◎ A valid custom element name

`局所~名@cD ◎ A local name

局所~名 ◎ A local name

`構築子@cD ◎ A constructor

`~custom要素~構築子$を包装する，~IDL `Function$I ~callback関数~型の値 ◎ A Web IDL Function callback function type value wrapping the custom element constructor

`観測先の属性~list@cD ◎ A list of observed attributes

`sequence<DOMString>^jc 型~値 ◎ A sequence<DOMString>

【 観測-対象にする内容~属性たちの名前を~~保持する。 】

`~lifecycle~callback~map@cD ◎ A collection of lifecycle callbacks

次の 4 個の~keyを伴う~map ⇒＃ `connectedCallback^l, `adoptedCallback^l, `disconnectedCallback^l, `attributeChangedCallback^l ◎ A map, whose four keys are the strings "connectedCallback", "disconnectedCallback", "adoptedCallback", and "attributeChangedCallback".＼

どの~keyに対応する値も［ ~NULL （既定~値）, ~IDL `Function$I ~callback関数~型の値 ］のいずれかをとる。 ◎ The corresponding values are either a Web IDL Function callback function type value, or null. By default the value of each entry is null.

【 これらがいつ呼ばれるかは， ~custom要素~反応 節を見よ。 】

`構築~stack@cD ◎ A construction stack

初期~時は空~list。 この~listは、`要素を昇格する$~algo, および `~HTML要素~構築子$により操作される。 ~list内の各~entryは、要素, または `すでに構築-済みを表す~marker@i のいずれかになる。 ◎ A list, initially empty, that is manipulated by the upgrade an element algorithm and the HTML element constructors. Each entry in the list will be either an element or an already constructed marker.

`~custom要素~定義を検索する@ 手続きは、所与の ( %文書, %名前空間, %局所~名, %is ) に対し［ `~custom要素~定義$, ~NULL ］のいずれかを返す： ◎ To look up a custom element definition, given a document, namespace, localName, and is, perform the following steps. They will return either a custom element definition or null:

1. ~IF［ %名前空間 ~NEQ `~HTML名前空間$ ］ ⇒ ~RET ~NULL ◎ If namespace is not the HTML namespace, return null.
2. ~IF［ %文書 が`属する閲覧文脈$はない ］ ⇒ ~RET ~NULL ◎ If document does not have a browsing context, return null.
3. %~registry ~LET %文書 が`属する閲覧文脈$の `Window$I の `CustomElementRegistry$I ~obj ◎ Let registry be document's browsing context's Window's CustomElementRegistry object.
4. ~IF［ %~registry 内に［ ( `名前$cD, `局所~名$cD ) ~EQ ( %局所~名, %局所~名 ) ］なる`~custom要素~定義$はある ］ ⇒ ~RET その`~custom要素~定義$ ◎ If there is custom element definition in registry with name and local name both equal to localName, return that custom element definition.
5. ~IF［ %~registry 内に［ ( `名前$cD, `局所~名$cD ) ~EQ ( %is, %局所~名 ) ］なる`~custom要素~定義$はある ⇒ ~RET その`~custom要素~定義$ ◎ If there is a custom element definition in registry with name equal to is and local name equal to localName, return that custom element definition.
6. ~RET ~NULL ◎ Return null.

4.13.4. `CustomElementRegistry^I ~interface

各 `Window$I ~objには、その作成-時に， `CustomElementRegistry$I ~objの一意な~instanceが結付けられる。 ◎ Each Window object is associated with a unique instance of a CustomElementRegistry object, allocated when the Window object is created.

注記： ~custom要素~registryが結付けられるのは， `Document$I ~objではなく， `Window$I ~objである — 各 `~custom要素~構築子$は `HTMLElement$I ~interfaceを継承し， `HTMLElement$I ~interfaceは `Window$I ~objごとに正確に 1 個あるので。 ◎ Custom element registries are associated with Window objects, instead of Document objects, since each custom element constructor inherits from the HTMLElement interface, and there is exactly one HTMLElement interface per Window object.

`Window$I ~interfaceの `customElements@m 属性は、此れの `CustomElementRegistry$I ~objを返さ~MUST。 ◎ The customElements attribute of the Window interface must return the CustomElementRegistry object for that Window object.

[Exposed=Window]
interface `CustomElementRegistry@I {
[`CEReactions$] void `define$m(
       DOMString %name,
       `CustomElementConstructor$I %constructor,
       optional `ElementDefinitionOptions$I %options
  );
  any `get$m(DOMString name);
  Promise<void> `whenDefined$m(DOMString %name);
  [`CEReactions$] void `upgrade$m(`Node$I %root);
};

callback `CustomElementConstructor@I = any ();

dictionary `ElementDefinitionOptions@I {
  DOMString `extends^m;
};

各 `CustomElementRegistry$I は、次のものを持つ： ◎ ↓

`~custom要素~定義$の集合

初期~時は空。 一般に，この仕様の各種~algoは、この~registry内の要素を［ `名前$cD, `局所~名$cD, `構築子$cD ］で検索する。 ◎ Every CustomElementRegistry has a set of custom element definitions, initially empty. In general, algorithms in this specification look up elements in the registry by any of name, local name, or constructor.

`要素~定義は走っている~flag@

初期~時は ~OFF。 `要素~定義$が再入的に呼出されるのを防止するためにある。 ◎ Every CustomElementRegistry also has an element definition is running flag which is used to prevent reentrant invocations of element definition. It is initially unset.

`定義-済み時~promise~map@

`妥当な~custom要素~名$から~promiseへの対応付けを与え、 `whenDefined()$m ~methodを実装するために利用される。 ◎ Every CustomElementRegistry also has a when-defined promise map, mapping valid custom element names to promises. It is used to implement the whenDefined() method.

【 これらの~promiseは、`定義-済み$になったとき`解決-$される。 】

%window . `customElements$m . `define(name, constructor)$m

`名前$cD %name の新たな`~custom要素$ — `自律的~custom要素$ — を定義する。 %constructor が その構築子を与え、 %name はその構築子に対応付けられる。 ◎ Defines a new custom element, mapping the given name to the given constructor as an autonomous custom element.

%window . `customElements$m . `define$m(%name, %constructor, { extends: %baseLocalName })

`名前$cD %name の新たな`~custom要素$ — `~custom化された組込みの要素$ — を定義する。 %constructor が その構築子を与え、 %name はその構築子に対応付けられる。 拡張される`要素~型$は、 %baseLocalName 値で識別される。 ［ `~custom要素$／未知の要素 ］を拡張しようと試行した場合、 `NotSupportedError$E 例外が投出される。 ◎ Defines a new custom element, mapping the given name to the given constructor as a customized built-in element for the element type identified by the supplied baseLocalName. A "NotSupportedError" DOMException will be thrown upon trying to extend a custom element or an unknown element.

%window . `customElements$m . `get(name)$m

所与の`名前$cD（ %name ）用に定義されている`~custom要素~構築子$を検索取得する。 そのような`~custom要素~定義$が見つからない場合は、 `undefined^jv を返す。 ◎ Retrieves the custom element constructor defined for the given name. Returns undefined if there is no custom element definition with the given name.

%window . `customElements$m . `whenDefined(name)$m

所与の`名前$cD（ %name ）の`~custom要素$が`定義-済み$になったとき充足されることになる，~promiseを返す（すでに定義-済みならば、充足-済みの~promiseが即時に返されることになる）。 %name が`妥当な~custom要素~名$でない場合、 `SyntaxError$E 例外で`却下される~promise$を返す。 ◎ Returns a promise that will be fulfilled when a custom element becomes defined with the given name. (If such a custom element is already defined, the returned promise will be immediately fulfilled.) Returns a promise rejected with a "SyntaxError" DOMException if not given a valid custom element name.

%window . `customElements$m . `upgrade(root)$m

%root の`~shadowも含む広義子孫$である要素すべてを — `接続されて$いなくても — `昇格しようと試行する$。 ◎ Tries to upgrade all shadow-including inclusive descendant elements of root, even if they are not connected.

`要素~定義@ は、`~custom要素~定義$を `CustomElementRegistry$I に追加する処理-である。 これは、 `define()$m ~methodにより達成される。 ◎ Element definition is a process of adding a custom element definition to the CustomElementRegistry. This is accomplished by the define() method. When invoked, the define(name, constructor, options) method must run these steps:

`define(name, constructor, options)@m ~methodの被呼出時には、次の手続きを走らせ~MUST： ◎ ↑

1. ~IF［ `IsConstructor$jA( %constructor ) ~EQ ~F ］ ⇒ ~THROW `TypeError$E ◎ If IsConstructor(constructor) is false, then throw a TypeError.
2. ~IF［ %name は`妥当な~custom要素~名$でない ］ ⇒ ~THROW `SyntaxError$E ◎ If name is not a valid custom element name, then throw a "SyntaxError" DOMException.
3. ~IF［ 此れ内に［ `名前$cD ~EQ %name ］なる~entryがある ］ ⇒ ~THROW `NotSupportedError$E ◎ If this CustomElementRegistry contains an entry with name name, then throw a "NotSupportedError" DOMException.
4. ~IF［ 此れ内に［ `構築子$cD ~EQ %constructor ］なる~entryがある ］ ⇒ ~THROW `NotSupportedError$E ◎ If this CustomElementRegistry contains an entry with constructor constructor, then throw a "NotSupportedError" DOMException.
5. %局所~名 ~LET %name ◎ Let localName be name.
6. %extends ~LET %options に `extends^jc ~memberが［ あれば その値 ／ なければ ~NULL ］ ◎ Let extends be the value of the extends member of options, or null if no such member exists.

7. ~IF［ %extends ~NEQ ~NULL ］： ◎ If extends is not null, then:

   1. ~IF［ %extends は`妥当な~custom要素~名$である ］ ⇒ ~THROW `NotSupportedError$E ◎ If extends is a valid custom element name, then throw a "NotSupportedError" DOMException.
   2. ~IF［ ( %extends, `~HTML名前空間$ ) 用の`要素~interface$ ~EQ `HTMLUnknownElement$I （例えば， %extends はこの仕様~内の要素~定義を指示していない） ］ ⇒ ~THROW `NotSupportedError$E ◎ If the element interface for extends and the HTML namespace is HTMLUnknownElement (e.g., if extends does not indicate an element definition in this specification), then throw a "NotSupportedError" DOMException.
   3. %局所~名 ~SET %extends ◎ Set localName to extends.
8. ~IF［ 此れの`要素~定義は走っている~flag$ ~EQ ~ON ］ ⇒ ~THROW `NotSupportedError$E ◎ If this CustomElementRegistry's element definition is running flag is set, then throw a "NotSupportedError" DOMException.
9. 此れの`要素~定義は走っている~flag$ ~SET ~ON ◎ Set this CustomElementRegistry's element definition is running flag.

10. 次の下位手続き (A), (B) を順に走らす — ただし， (A) にて例外が投出されたときは、~catchして，下の (B) に~~移行する： ◎ Run the following substeps while catching any exceptions:

    (A)：

    1. %~prototype ~LET `Get$jA( %constructor, `prototype^l ) （例外投出あり） ◎ Let prototype be Get(constructor, "prototype"). Rethrow any exceptions.
    2. ~IF［ `Type$jA( %~prototype ) ~NEQ `Object^jc ］ ⇒ ~THROW `TypeError$E ◎ If Type(prototype) is not Object, then throw a TypeError exception.
    3. %lifecycleCallbacks ~LET 次の~keyを順に伴い, どの~keyに対応する値も ~NULL にされた~map ⇒＃ `connectedCallback^l, `disconnectedCallback^l, `adoptedCallback^l, `attributeChangedCallback^l ◎ Let lifecycleCallbacks be a map with the four keys "connectedCallback", "disconnectedCallback", "adoptedCallback", and "attributeChangedCallback", each of which belongs to an entry whose value is null.

    4. %lifecycleCallbacks 内の ~EACH ( ~key %~callback名 ) に対し，前~段に挙げた順に： ◎ For each of the four keys callbackName in lifecycleCallbacks, in the order listed in the previous step:

       1. %~callback値 ~LET `Get$jA( %~prototype, %~callback名 ) （例外投出あり） ◎ Let callbackValue be Get(prototype, callbackName). Rethrow any exceptions.
       2. ~IF［ %~callback値 ~NEQ `undefined^jv ］ ⇒ %lifecycleCallbacks の~key %~callback名 に対応する値 ~SET `~IDL型に変換する$( %~callback値, `Function$I ~callback型 ) （例外投出あり） ◎ If callbackValue is not undefined, then set the value of the entry in lifecycleCallbacks with key callbackName to the result of converting callbackValue to the Web IDL Function callback type. Rethrow any exceptions from the conversion.
    5. %観測先~属性~list ~LET 空の `sequence<DOMString>^jc ◎ Let observedAttributes be an empty sequence<DOMString>.

    6. ~IF［ %lifecycleCallbacks の~key `attributeChangedCallback^l に対応する値 ~NEQ ~NULL ］： ◎ If the value of the entry in lifecycleCallbacks with key "attributeChangedCallback" is not null, then:

       1. %観測先~属性~可反復 ~LET `Get$jA( %constructor, `observedAttributes^l ) （例外投出あり） ◎ Let observedAttributesIterable be Get(constructor, "observedAttributes"). Rethrow any exceptions.
       2. ~IF［ %観測先~属性~可反復 ~NEQ `undefined^jv ］ ⇒ %観測先~属性~list ~SET `~IDL型に変換する$( %観測先~属性~可反復, `sequence<DOMString>^jc 型 ) （例外投出あり） ◎ If observedAttributesIterable is not undefined, then set observedAttributes to the result of converting observedAttributesIterable to a sequence<DOMString>. Rethrow any exceptions from the conversion.

    (B)： ◎ Then, perform the following substep, regardless of whether the above steps threw an exception or not:

    1. 此れの`要素~定義は走っている~flag$ ~SET ~OFF ◎ Unset this CustomElementRegistry's element definition is running flag.
    2. ~IF［ 上の (A) にて例外が投出された ］ ⇒ ~THROW その例外 ◎ Finally, if the first set of substeps threw an exception, then rethrow that exception (thus terminating this algorithm). Otherwise, continue onward.
11. %定義 ~LET 次のようにされた，新たな `~custom要素~定義$ ⇒＃ `名前$cD ~SET %name, `局所~名$cD ~SET %局所~名, `構築子$cD ~SET %constructor, `観測先の属性~list$cD ~SET %観測先~属性~list, `~lifecycle~callback~map$cD ~SET %lifecycleCallbacks ◎ Let definition be a new custom element definition with name name, local name localName, constructor constructor, observed attributes observedAttributes, and lifecycle callbacks lifecycleCallbacks.
12. 此れに %定義 を追加する ◎ Add definition to this CustomElementRegistry.
13. %文書 ~LET 此れに`関連する大域~obj$に`結付けられている文書$ ◎ Let document be this CustomElementRegistry's relevant global object's associated Document.

14. %昇格~候補たち ~LET %文書 の`~shadowも含む子孫$のうち，次を満たす要素からなる `~shadowも含む木~順序$による~list：

    • ( 名前空間, 局所~名 ) ~EQ ( `~HTML名前空間$, %局所~名 )
    • 加えて，［ %extends ~NEQ ~NULL ］の場合は、次も満たす ⇒ 要素の`~is0値$ ~EQ %name
    ◎ Let upgrade candidates be all elements that are shadow-including descendants of document, whose namespace is the HTML namespace and whose local name is localName, in shadow-including tree order. Additionally, if extends is non-null, only include elements whose is value is equal to name.
15. %昇格~候補たち 内の ~EACH ( 要素 %要素 ) に対し ⇒ `~custom要素~昇格~反応を~enqueueする$( %要素, %定義 ) ◎ For each element element in upgrade candidates, enqueue a custom element upgrade reaction given element and definition.

16. ~IF［ 此れの`定義-済み時~promise~map$内に［ ~key ~EQ %name ］なる~entry %~entry がある ］： ◎ If this CustomElementRegistry's when-defined promise map contains an entry with key name:

    1. `undefined^jv で［ %~entry の値（ ~promise ） ］を`解決-$する ◎ Let promise be the value of that entry. ◎ Resolve promise with undefined.
    2. 此れの`定義-済み時~promise~map$から %~entry を削除する ◎ Delete the entry with key name from this CustomElementRegistry's when-defined promise map.

`get(name)@m ~methodの被呼出時には、次の手続きを走らせ~MUST： ◎ When invoked, the get(name) method must run these steps:

1. ~IF［ 此れ内に［ `名前$cD ~EQ %name ］なる~entryがある ］ ⇒ ~RET その~entryの`構築子$cD ◎ If this CustomElementRegistry contains an entry with name name, then return that entry's constructor.
2. ~RET `undefined^jv ◎ Otherwise, return undefined.

`whenDefined(name)@m ~methodの被呼出時には、次の手続きを走らせ~MUST： ◎ When invoked, the whenDefined(name) method must run these steps:

1. ~IF［ %name は`妥当な~custom要素~名$でない ］ ⇒ ~RET `SyntaxError$E 例外で`却下される~promise$ ◎ If name is not a valid custom element name, then return a new promise rejected with a "SyntaxError" DOMException.
2. ~IF［ 此れ内に［ `名前$cD ~EQ %name ］なる~entryがある ］ ⇒ ~RET `undefined^jv で`解決される~promise$ ◎ If this CustomElementRegistry contains an entry with name name, then return a new promise resolved with undefined.
3. %~map ~LET 此れの`定義-済み時~promise~map$ ◎ Let map be this CustomElementRegistry's when-defined promise map.
4. ~IF［ %~map 内に［ ~key ~EQ %name ］なる~entryはない ］ ⇒ %~map 内に［ (~key, 値 ) ~SET ( %name, `新たな~promise$ ) ］にされた~entryを作成する ◎ If map does not contain an entry with key name, create an entry in map with key name and whose value is a new promise.
5. %~promise ~LET %~map 内の［ ~key ~EQ %name ］なる~entryの値 ◎ Let promise be the value of the entry in map with key name.
6. ~RET %~promise ◎ Return promise.

%articleContainer.hidden = true;

fetch(%articleURL)
  .then(%response => %response.text())
  .then(%text => {
    %articleContainer.innerHTML = %text;

    return Promise.all(
      [...%articleContainer.querySelectorAll(":not(:defined)")]
        .map(%el => customElements.whenDefined(%el.localName))
    );
  })
  .then(() => {
    %articleContainer.hidden = false;
  });

`upgrade(root)@m ~methodの被呼出時には、次の手続きを走らせ~MUST： ◎ When invoked, the upgrade(root) method must run these steps:

1. %候補たち ~LET ［ %root の`~shadowも含む広義子孫$である要素 ］すべてからなる，`~shadowも含む木~順序$による`~list$ ◎ Let candidates be a list of all of root's shadow-including inclusive descendant elements, in shadow-including tree order.
2. %候補たち 内の ~EACH( %候補 ) に対し ⇒ `要素を昇格しようと試行する$( %候補 ) ◎ For each candidate of candidates, try to upgrade candidate.

const %el = document.createElement("spider-man");

class SpiderMan extends HTMLElement {}
customElements.define("spider-man", SpiderMan);

console.assert(!(%el instanceof SpiderMan)); /* 
まだ昇格されていない
◎
not yet upgraded
 */

customElements.upgrade(%el);
console.assert(%el instanceof SpiderMan);    /* 
昇格された
◎
upgraded! */

4.13.5. 昇格

`要素を昇格する@ ときは、所与の ( `~custom要素~定義$ %定義, 要素 %要素 ) に対し，次の手続きを走らす： ◎ To upgrade an element, given as input a custom element definition definition and an element element, run the following steps:

1. ~IF［ %要素 は`~customである$ ］ ⇒ ~RET ◎ If element is custom, then return.

   これが生じ得るのは、次の例に示すように，この~algoが再入的に呼出されたときである： ◎ This can occur due to reentrant invocation of this algorithm, as in the following example:

   <!DOCTYPE html>
   <x-foo id="a"></x-foo>
   <x-foo id="b"></x-foo>
   
   <script>
   /* 
   `a^v, `b^v の両者に対し，昇格~反応を~enqueueするように定義する：
   ◎
   Defining enqueues upgrade reactions for both "a" and "b"
    */
   
   customElements.define("x-foo", class extends HTMLElement {
     constructor() {
       super();
   
       const %b = document.querySelector("#b");
       %b.remove();
   
   /* 
   `a^v, `b^v に対し この構築子が走っている間， `a^v, `b^v は依然として未定義なので、次のように `b^v を文書の中へ挿入するときには、
   `x-foo^e の定義-時に~enqueueされるものに加え，［
   2 回目の， `b^v に対する 昇格~反応
   ］も~enqueueすることになる。
   ◎
   While this constructor is running for "a", "b" is still undefined, and so inserting it into the document will enqueue a second upgrade reaction for "b" in addition to the one enqueued by defining x-foo.
    */
       document.body.appendChild(%b);
     }
   })
   </script>
   

   したがって，`要素を昇格する$~algoは、 2 回目の `b^v に対し呼出されたときには，この段にて 早くに抜け出ることになる。 ◎ This step will thus bail out the algorithm early when upgrade an element is invoked with "b" a second time.

2. ~IF［ %要素 の`~custom要素~状態$ ~EQ `failed^l ］ ⇒ ~RET ◎ If element's custom element state is "failed", then return.
3. %要素 の`~custom要素~定義$x ~SET %定義 ◎ Set element's custom element definition to definition.
4. %要素 の`属性~list$ 内の ~EACH ( %属性 ) に対し，順に ⇒ `~custom要素~callback反応を~enqueueする$( %要素, `attributeChangedCallback^l, « %属性 の局所~名, ~NULL, %属性 の値, %属性 の名前空間 » ) ◎ For each attribute in element's attribute list, in order, enqueue a custom element callback reaction with element, callback name "attributeChangedCallback", and an argument list containing attribute's local name, null, attribute's value, and attribute's namespace.
5. ~IF［ %要素 は`接続されて$いる ］ ⇒ `~custom要素~callback反応を~enqueueする$( %要素, `connectedCallback^l, « » ) ◎ If element is connected, then enqueue a custom element callback reaction with element, callback name "connectedCallback", and an empty argument list.
6. %定義 の`構築~stack$cDの末尾に %要素 を追加する ◎ Add element to the end of definition's construction stack.
7. %C ~LET %定義 の`構築子$cD ◎ Let C be definition's constructor.

8. 次の下位手続き (A), (B) を順に走らす — ただし， (A) にて例外が投出されたときは、~catchして，下の (B) に~~移行する： ◎ Run the following substeps while catching any exceptions:

   (A)：

   1. %構築-結果 ~LET `~callback関数で構築する$( %C, 空の引数~list ) ◎ Let constructResult be the result of constructing C, with no arguments.

      %C が不適合に `CEReactions$xA 拡張属性~付きの~APIを利用している場合、この~algoの冒頭にて~enqueueされた反応は、 %C が終わってこの~algoに制御を返す前の，この段の間に実行されることになる。 他の場合、 %C と残りの昇格~処理-を終えた後に実行されることになる。 ◎ If C non-conformantly uses an API decorated with the [CEReactions] extended attribute, then the reactions enqueued at the beginning of this algorithm will execute during this step, before C finishes and control returns to this algorithm. Otherwise, they will execute after C and the rest of the upgrade process finishes.

   2. ~IF［ `SameValue$jA( %構築-結果 . [[value]], %要素 ) ~EQ ~F ］ ⇒ ~THROW `InvalidStateError$E ◎ If SameValue(constructResult, element) is false, then throw an "InvalidStateError" DOMException.

      注記： これは、次の場合に生じ得る：

      • %C が、 `super()^jc を~callする前に，同じ~custom要素の別の~instanceを構築している
      • %C が、構築子から任意の~objを返すような，~JS による `return^jc を上書きする特色機能を利用している

      ◎ This can occur if C constructs another instance of the same custom element before calling super(), or if C uses JavaScript's return-override feature to return an arbitrary object from the constructor.

   (B)： ◎ Then, perform the following substep, regardless of whether the above steps threw an exception or not:

   1. %定義 の`構築~stack$cDから最後の~entryを除去する ◎ Remove the last entry from the end of definition's construction stack.

      注記： %C が `super()^jc を~callして（適合するならば そうすることになる）, かつ その~callが成功した場合、除去される~entryは，［ この~algoの冒頭で~pushされた） %要素 ］を置換した， `すでに構築-済みを表す~marker$i になる（`~HTML要素~構築子$がこの置換を行う）。 ◎ Assuming C calls super() (as it will if it is conformant), and that the call succeeds, this will be the already constructed marker that replaced the element we pushed at the beginning of this algorithm. (The HTML element constructor carries out this replacement.)

      そうでない場合（ `super()^jc を~callしなかった（すなわち，適合しない）か, `~HTML要素~構築子$が例外を投出した場合）、この~entryは依然として %要素 のままになる。 ◎ If C does not call super() (i.e. it is not conformant), or if any step in the HTML element constructor throws, then this entry will still be element.

   2. ~IF［ 上の (A) にて例外が投出された ］： ◎ Finally, if the above steps threw an exception, then:

      1. %要素 の`~custom要素~状態$ ~SET `failed^l ◎ Set element's custom element state to "failed".
      2. %要素 の`~custom要素~定義$x ~SET ~NULL ◎ Set element's custom element definition to null.
      3. %要素 の`~custom要素~反応~queue$を空にする ◎ Empty element's custom element reaction queue.
      4. ~THROW 投出された例外 ◎ Rethrow the exception (thus terminating this algorithm).
9. %要素 の`~custom要素~状態$ ~SET `custom^l ◎ Set element's custom element state to "custom".

`要素を昇格しようと試行する@ ときは、所与の ( 要素 %要素 ) に対し，次の手続きを走らす： ◎ To try to upgrade an element, given as input an element element, run the following steps:

1. %定義 ~LET `~custom要素~定義を検索する$( %要素 の`~node文書$, %要素 の名前空間, %要素 の局所~名, %要素 の`~is0値$ ) ◎ Let definition be the result of looking up a custom element definition given element's node document, element's namespace, element's local name, and element's is value.
2. ~IF［ %定義 ~NEQ ~NULL ］ ⇒ `~custom要素~昇格~反応を~enqueueする$( %要素, %定義 ) ◎ If definition is not null, then enqueue a custom element upgrade reaction given element and definition.

4.13.6. ~custom要素~反応

`~custom要素$は、作者~codeを走らすことにより，一定の出来事に応答する能を備える： ◎ A custom element possesses the ability to respond to certain occurrences by running author code:

• 要素を`昇格$したときには、`~custom要素~構築子$を引数なしで走らす。 ◎ When upgraded, its constructor is run, with no arguments.
• 要素が`接続されたとき$は、その `connectedCallback()^jc が引数なしで~callされる。 ◎ When it becomes connected, its connectedCallback is called, with no arguments.
• 要素が`切断されたとき$は、その `disconnectedCallback()^jc が引数なしで~callされる。 ◎ When it becomes disconnected, its disconnectedCallback is called, with no arguments.
• 要素が他の文書に`受入され$たときは、その `adoptedCallback()^jc が ( 旧~文書, 新~文書 ) を引数に~callされる。 ◎ When it is adopted into a new document, its adoptedCallback is called, given the old document and new document as arguments.
• 要素のいずれかの属性が［ `変更-$A ／ `付加-$A ／ `除去-$A ／ `置換-$A ］されたときは、その `attributeChangedCallback()^jc が ( 属性の局所~名, 旧~値, 新~値, 名前空間 ) を引数に~callされる（属性が［ 付加-／ 除去- ］されたときの属性の［ 旧~値／ 新~値 ］は ~NULL と見なされる）。 ◎ When any of its attributes are changed, appended, removed, or replaced, its attributeChangedCallback is called, given the attribute's local name, old value, new value, and namespace as arguments. (An attribute's old or new value is considered to be null when the attribute is added or removed, respectively.)

これらの反応は、 `~custom要素~反応@ と総称される。 ◎ We call these reactions collectively custom element reactions.

`~custom要素~反応$は、［ それを与える作者~codeが，他から~~干渉されると困る演算の途中で走らない ］ように，特別に~careされる下で呼出される。 それらの反応は、実質的に “利用者~scriptに~~制御が返される直前まで” 遅延される。 このことは、ほとんどの目的においては，それらは同期的に実行するように現れるが、いくつかの演算（`~nodeを~cloneする$, `範囲$を操作するなど）が複雑に複合された事例では、関連する~UA処理~手続きすべてが完了するまで遅延された上で，~~一括して走らすことを意味する。 ◎ The way in which custom element reactions are invoked is done with special care, to avoid running author code during the middle of delicate operations. Effectively, they are delayed until "just before returning to user script". This means that for most purposes they appear to execute synchronously, but in the case of complicated composite operations (like cloning, or range manipulation), they will instead be delayed until after all the relevant user agent processing steps have completed, and then run together as a batch.

加えて，これらの反応の精確な順序付けは、下に述べる，~queueたちの~stackが成す，いくぶん複雑な~systemを介して管理される。 この~systemの背後にある意向は、少なくとも単独の`~custom要素$における局所的な文脈~下では、各`~custom要素~反応$は，常に，それらを誘発した動作たちの順序と同じ順序で呼出されることを保証することである。 （`~custom要素~反応$の~codeは，自前で【他の要素に対する】変異を遂行できるので、複数の要素にわたる大域的な順序付けを保証することは，可能0でない） ◎ Additionally, the precise ordering of these reactions is managed via a somewhat-complicated stack-of-queues system, described below. The intention behind this system is to guarantee that custom element reactions always are invoked in the same order as their triggering actions, at least within the local context of a single custom element. (Because custom element reaction code can perform its own mutations, it is not possible to give a global ordering guarantee across multiple elements.)

各 `互いに関係するかつ生成元も類似する閲覧文脈~群$は、初期~時は空の， `~custom要素~反応~stack@ を有する。 この~stack内の各~itemは， `要素~queue@ であり、これらも初期~時は空である。 また、この~stackの一番上に積まれた`要素~queue$を，特に `現在の要素~queue@ という。 `要素~queue$内の各~itemは、要素である（この~queueは，`昇格$用にも利用されるので、各~要素は，この時点では必ずしも`~customである$とは限らない。） ◎ Each unit of related similar-origin browsing contexts has a custom element reactions stack, which is initially empty. The current element queue is the element queue at the top of the custom element reactions stack. Each item in the stack is an element queue, which is initially empty as well. Each item in an element queue is an element. (The elements are not necessarily custom yet, since this queue is used for upgrades as well.)

各`~custom要素~反応~stack$には、初期~時は空の`要素~queue$である， `予備の要素~queue@ も結付けられる。 ［ `CEReactions$xA 付きの~APIを通さずに, あるいは 構文解析器の`~tokenに対し要素を作成する$~algoを通して ］~DOMに影響するような演算の間、要素は`予備の要素~queue$に~pushされる。 例えば、`編集-可能$な要素の子孫や属性を改変するような，利用者により起動される編集~演算が挙げられる。 `予備の要素~queue$の処理-時における再入を防ぐため、各`~custom要素~反応~stack$には、初期-時は ~OFF の `予備の要素~queueは処理中~flag@ も結付けられる。 ◎ Each custom element reactions stack has an associated backup element queue, which an initially-empty element queue. Elements are pushed onto the backup element queue during operations that affect the DOM without going through an API decorated with [CEReactions], or through the parser's create an element for the token algorithm. An example of this is a user-initiated editing operation which modifies the descendants or attributes of an editable element. To prevent reentrancy when processing the backup element queue, each custom element reactions stack also has a processing the backup element queue flag, initially unset.

各 要素には、初期~時は空の， `~custom要素~反応~queue@ が結付けられる。 `~custom要素~反応~queue$内の各~itemは、次の 2 種いずれかになる： ◎ All elements have an associated custom element reaction queue, initially empty. Each item in the custom element reaction queue is of one of two types:

• ~custom要素を`昇格$することになる， `昇格~反応@ 。 その内容は、`~custom要素~定義$である。 ◎ An upgrade reaction, which will upgrade the custom element and contains a custom element definition; or
• ~lifecycle~callbackを~callすることになる， `~callback反応@ 。 その内容は、［ ~callback関数, および それに対する引数の~list ］からなる。 ◎ A callback reaction, which will call a lifecycle callback, and contains a callback function as well as a list of arguments.

これらすべては、次の図式に要約される： ◎ This is all summarized in the following schematic diagram:

~custom要素
反応~stack

要素~queue

~custom要素~反応~queue

昇格~時

属性
変更-時

属性
変更-時

接続-時

`適切な要素~queueに~enqueueする@ ときは、所与の ( 要素 %要素 ) に対し，次の手続きを走らす： ◎ To enqueue an element on the appropriate element queue, given an element element, run the following steps:

1. ~IF［ `~custom要素~反応~stack$は空である ］： ◎ If the custom element reactions stack is empty, then:

   1. %要素 を`予備の要素~queue$に追加する ◎ Add element to the backup element queue.
   2. ~IF［ `予備の要素~queueは処理中~flag$ ~EQ ~ON ］ ⇒ ~RET ◎ If the processing the backup element queue flag is set, then return.
   3. `予備の要素~queueは処理中~flag$ ~SET ~ON ◎ Set the processing the backup element queue flag.

   4. 次の手続きを遂行する`小taskを~queueする$： ◎ Queue a microtask to perform the following steps:

      1. `~custom要素~反応たちを呼出す$( `予備の要素~queue$ ) ◎ Invoke custom element reactions in the backup element queue.
      2. `予備の要素~queueは処理中~flag$ ~SET ~OFF ◎ Unset the processing the backup element queue flag.
2. ~ELSE ⇒ %要素 を`現在の要素~queue$に追加する ◎ Otherwise, add element to the current element queue.

`~custom要素~callback反応を~enqueueする@ ときは、所与の ( `~custom要素$ %要素, ~callback名 %~callback名, 引数~list %引数~list ) に対し，次の手続きを走らす： ◎ To enqueue a custom element callback reaction, given a custom element element, a callback name callbackName, and a list of arguments args, run the following steps:

1. %定義 ~LET %要素 の`~custom要素~定義$x ◎ Let definition be element's custom element definition.
2. %~callback ~LET %定義 の`~lifecycle~callback~map$cD内の［ ~key ~EQ %~callback名 ］なる~entryの値 ◎ Let callback be the value of the entry in definition's lifecycle callbacks with key callbackName.
3. ~IF［ %~callback ~EQ ~NULL ］ ⇒ ~RET ◎ If callback is null, then return.

4. ~IF［ %~callback名 ~EQ `attributeChangedCallback^l ］： ◎ If callbackName is "attributeChangedCallback", then:

   1. %属性~名 ~LET %引数~list 内の最初の引数 ◎ Let attributeName be the first element of args.
   2. ~IF［ %定義 の`観測先の属性~list$cDは %属性~名 を包含しない ］ ⇒ ~RET ◎ If definition's observed attributes does not contain attributeName, then return.
5. ( ~callback関数, 引数~list ) として ( %~callback, %引数~list ) を伴う新たな`~callback反応$を， %要素 の`~custom要素~反応~queue$に追加する ◎ Add a new callback reaction to element's custom element reaction queue, with callback function callback and arguments args.
6. `適切な要素~queueに~enqueueする$( %要素 ) ◎ Enqueue an element on the appropriate element queue given element.

`~custom要素~昇格~反応を~enqueueする@ ときは、所与の ( 要素 %要素, `~custom要素~定義$ %定義 ) に対し，次の手続きを走らす： ◎ To enqueue a custom element upgrade reaction, given an element element and custom element definition definition, run the following steps:

1. `~custom要素~定義$として %定義 を伴う新たな`昇格~反応$を， %要素 の`~custom要素~反応~queue$に追加する ◎ Add a new upgrade reaction to element's custom element reaction queue, with custom element definition definition.
2. `適切な要素~queueに~enqueueする$( %要素 ) ◎ Enqueue an element on the appropriate element queue given element.

`~custom要素~反応たちを呼出す@ ときは、所与の ( `要素~queue$ %~queue ) に対し，次の手続きを走らす： ◎ To invoke custom element reactions in an element queue queue, run the following steps:

1. %~queue 内の ~EACH ( `~custom要素$ %要素 ) に対し： ◎ For each custom element element in queue:

   1. %反応~queue ~LET %要素 の`~custom要素~反応~queue$ ◎ Let reactions be element's custom element reaction queue.

   2. ~WHILE［ %反応~queue は空でない ］： ◎ Repeat until reactions is empty:

      1. %反応~queue から最初の~itemを除去する ◎ Remove the first element of reactions, and＼
      2. %反応 ~LET 前~段で除去した~item ◎ let reaction be that element.＼

      3. %反応 の種別に応じて： ◎ Switch on reaction's type:

         `昇格~反応$

         `要素を昇格する$( %反応 の`~custom要素~定義$, %要素 ) ◎ Upgrade element using reaction's custom element definition.

         `~callback反応$

         `~callback関数を呼出す$( %反応 の~callback関数, %反応 の引数~list, %要素 （`~callback this 値$） ) ◎ Invoke reaction's callback function with reaction's arguments, and with element as the callback this value.

         この段の中で例外が投出されたときは、~catchして ⇒ その`例外を報告する$ ◎ If this throws an exception, catch it, and report the exception.

`~custom要素~反応$が適切に誘発されることを確保するため、この仕様は， `CEReactions@xA ~IDL `拡張属性$を導入する。 それは、`~custom要素~反応$を適切に追跡して呼出すため，関連する~algoに追加の手続きを増補することを指示する。 ◎ To ensure custom element reactions are triggered appropriately, we introduce the [CEReactions] IDL extended attribute. It indicates that the relevant algorithm is to be supplemented with additional steps in order to appropriately track and invoke custom element reactions.

【 以下に現れる各種~IDL用語の参照先： 演算, 属性, 設定子と削除子, 読専 】

`CEReactions$xA 拡張属性 注釈付きの［ 演算, 属性, 設定子, 削除子 ］に対しては、その［ 演算 ／ 設定子 ／ 削除子 ／ 属性の設定子 ］の記述に指定されている手続き %手続き に代えて，次を走らせ~MUST： ◎ Operations, attributes, setters, or deleters annotated with the [CEReactions] extended attribute must run the following steps in place of the ones specified in their description:

1. `~custom要素~反応~stack$に新たな`要素~queue$を`~push$する ◎ Push a new element queue onto the custom element reactions stack.
2. %例外 ~LET ε ◎ ↓

3. %値 ~SET %手続き を走らせた結果

   %手続き から例外が投出されたときは、~catchして ⇒ %例外 ~SET その例外

   ◎ Run the originally-specified steps for this construct, catching any exceptions. If the steps return a value, let value be the returned value. If they throw an exception, let exception be the thrown exception.
4. %~queue ~LET `~custom要素~反応~stack$から`~pop$した結果 ◎ Let queue be the result of popping from the custom element reactions stack.
5. `~custom要素~反応たちを呼出す$( %~queue ) ◎ Invoke custom element reactions in queue.
6. ~IF［ %例外 ~NEQ ε ］ ⇒ ~THROW %例外 ◎ If an exception exception was thrown by the original steps, rethrow exception.
7. ~RET %値 ◎ If a value value was returned from the original steps, return value.

~UAにより導入される非~標準~APIのうち、~DOMを改変し得る結果，［ `~custom要素~callback反応を~enqueueする$ ／ `~custom要素~昇格~反応を~enqueueする$ ］もの — 例えば何らかの属性や子~要素を改変するものなど — には、`CEReactions$xA 属性が付与され~MUST。 ◎ Any nonstandard APIs introduced by the user agent that could modify the DOM in such a way as to cause enqueuing a custom element callback reaction or enqueuing a custom element upgrade reaction, for example by modifying any attributes or child elements, must also be decorated with the [CEReactions] attribute.