-
Notifications
You must be signed in to change notification settings - Fork 4
/
862.txt
107 lines (88 loc) · 5.54 KB
/
862.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
* 仕様書
[REFS[
- [3] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-05-14 09:55:50 +09:00]]) <https://html.spec.whatwg.org/#custom-element-conformance>
- [14] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-05-14 09:55:50 +09:00]]) <https://html.spec.whatwg.org/#custom-element-constructor>
- [17] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-05-14 09:55:50 +09:00]]) <https://html.spec.whatwg.org/#concept-custom-element-definition-constructor>
- [19] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-05-14 09:55:50 +09:00]]) <https://html.spec.whatwg.org/#concept-upgrade-an-element>
]REFS]
* 意味
[15] [DFN[[RUBYB[カスタム要素構築器]@en[custom element constructor]]]]は、
[[カスタム要素]]の[[構築]]です [SRC[>>14]]。[[カスタム要素構築器]]は、
(通常の[[要素]]のように[[利用者エージェント]]が定義するのではなく)
[[著者]]が定義します。
[16] [[カスタム要素構築器]]は、いくつかの条件を満たさなければならないことを除けば、
普通の [[JavaScript]] の[[構築器]]と変わりありません。つまり、
単なる [[JavaScript]] の[[関数]]です。
* 著者の要件
[4] [[著者]]は、[[カスタム要素構築器]]について、次の条件を満たさなければ[MUST[なりません]]
[SRC[>>3]]。
[FIG(list)[
- [5] [[構築器本体]]の最初の[[文]]として、[[引数]]なしで [CODE(JS)@en[super]]
を[[呼び出し]]する。
-- [6] これは、他の[[コード]]の[[実行]]前に正しい[[プロトタイプ鎖]]と
[CODE(JS)@en[this]] 値を確立するものです。
- [7] [CODE(JS)@en[return]] [[文]]は、単純な [[early-return]]
([CODE(JS)@en[return]] または [CODE(JS)@en[[[return]] [[this]]]])
の場合を除き、[[構築器本体]]中で使わない。
- [8] [[内容属性]]や[[内容]]を検査しない。
-- [9] [[格上げ][格上げ (カスタム要素)]]でない場合には[[内容属性]]や[[内容]]は現れません。
[[格上げ][格上げ (カスタム要素)]]の時にしか使えない[[要素]]は不便です。
- [10] [[内容属性]]や[[内容]]を設定しない。
-- [11] [CODE(DOMm)@en[createElement]] や [CODE(DOMm)@en[createElementNS]]
の呼び出し側の期待に反するからです。
]FIG]
[13] 一般に、[[構築器]]は、初期状態や既定値の設定、
[[イベントリスナー]]や[[影ホスト]]の設定に使う[SHOULD[べきです]]。 [SRC[>>3]]
[12] 一般に、処理 (特に [[fetch]] や[[レンダリング]]を伴うもの)
はできるだけ[[構築器]]ではなく、 [CODE[connectedCallback]]
を使う[SHOULD[べきです]]。
[WEAK[ただし、 [CODE[connectedCallback]] は何度も実行されることがありますから、本当に一度だけ実行したい初期化作業は対策が必要になります。]]
[SRC[>>3]]
* [F[構築器][カスタム要素構築器]] (カスタム要素定義)
[18] [[カスタム要素定義]]は、[DFN[[F[[RUBYB[構築器]@en[constructor]]][カスタム要素構築器]]]]を持ちます [SRC[>>17]]。
[F[構築器][カスタム要素構築器]]は、[[カスタム要素構築器]]です [SRC[>>17]]。
* 格上げ
[20] [DFN[[RUBYB[要素の格上げ]@en[upgrade an element]]]]は、
[[カスタム要素定義]][VAR[定義]]と[[要素]][VAR[要素]]について、
次のようにします [SRC[>>19]]。
[FIG(steps)[
= [21] [VAR[要素]]を、[VAR[定義]]の[F[構築スタック]]の末尾に追加します。
= [22] [VAR[C]] を、[VAR[定義]]の[F[構築器][カスタム要素構築器]]に設定します。
= [23] [VAR[結果]]を、[VAR[C]] に [CODE[Construct]] を適用した結果に設定します。
= [24] [VAR[要素]]を、[VAR[定義]]の[F[構築スタック]]の末尾から削除します。
= [25] [VAR[結果]]が [[abrupt completion]] なら、
== [26] [VAR[結果]]を返してここで停止します。
(これは、[[例外]]が[[投げ]]られたら改めて[[投げ]]ることを表します。)
= [27] [VAR[結果]]の[F(ss)[値]]と[VAR[要素]]について [CODE[SameValue]]
を適用した結果が[[偽]]なら、
== [28] [CODE[InvalidStateError]] を[[投げ]]、ここで停止します。
=- [29] これは、 >>5 や >>7 に違反すると発生することがあります。
= [30] [VAR[要素]]の[F[カスタム要素状態]]を、 [CODE[customized]] に設定します。
= [31] [VAR[要素]]の[F[属性リスト]]の各[VAR[属性]]について順に、
== [32] [[enqueue a custom element callback reaction]] を実行します。
[FIG(list members)[
: [VAR[要素]] : [VAR[要素]]
: [VAR[コールバック名]] : [CODE[attributeChangedCallback]]
: [VAR[引数リスト]] :
[FIG(list)[
= [VAR[属性]]の[F[局所名]]
= [[null]]
= [VAR[属性]]の[F[値]]
= [VAR[属性]]の[F[名前空間]]
]FIG]
]FIG]
= [33] [VAR[要素]]が[[影を含む文書中]]なら、
== [34] [[enqueue a custom element callback reaction]] を実行します。
[FIG(list members)[
: [VAR[要素]] : [VAR[要素]]
: [VAR[コールバック名]] : [CODE[connectedCallback]]
: [VAR[引数リスト]] : [[空]]
]FIG]
]FIG]
* 歴史
[1] [CITE@en[Add custom elements to HTML · whatwg/html@6e7eaa4]]
([TIME[2016-04-26 18:10:37 +09:00]] 版)
<https://github.com/whatwg/html/commit/6e7eaa4bd2912965fd83766f99f984f249531f3a>
[2] [CITE@en[Add customElements.get() to retrieve a custom element constructor · whatwg/html@1d596a5]]
([TIME[2016-04-26 18:41:22 +09:00]] 版)
<https://github.com/whatwg/html/commit/1d596a555d3c2f067ae643e447eaa88137b595ac>