-
Notifications
You must be signed in to change notification settings - Fork 8
/
HTML-custom-ja.html
5694 lines (5243 loc) · 174 KB
/
HTML-custom-ja.html
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>HTML Standard — Custom elements（日本語訳）</title>
<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-whatwg.css" type="text/css">
<style>
code.bnf {
display: block;
color: var(--text-color-1);
}
.xattr {
font-family: monospace0, monospace;
color: var(--K-color);
}
#_CE-reactions {
font-size: 1.2em;
width: 28em;
height: 19em;
position: relative;
}
#_CE-reactions > div {
position: absolute;
text-align: center;
white-space: nowrap;
}
#_CE-reactions > div > span {
font-size: 0.9em;
font-family: sans-serif0, sans-serif;
}
#_CE-reactions > ._reaction {
top: 16em;
width: 4em;
height: 2em;
}
#_CE-reactions > ._reaction > span {
font-size: 0.8em;
}
</style>
<script src="common0.js"></script>
<script src="common1.js" async></script>
<script>
Util.ready = function(){
const source_data = {
toc_main: 'custom-elements',
generate: expand
};
Util.switchWordsInit(source_data);
}
function expand(){
const class_map = this.class_map;
const tag_map = this.tag_map;
const link_map = this.link_map;
return this.html.replace(
/%[\w\-~一-鿆あ-ん]+|`(.+?)([$@\^])(\w*)/g,
create_html
);
function create_html(match, key, indicator, klass){
if(!key) {//%
return `<var>${match.slice(1)}</var>`;
}
let href = '';
let href1 = '';
{
const n = key.indexOf('＠');
if(n > 0) {
href1 = key.slice(n + 1);
key = key.slice(0, n);
}
}
let text = key;
switch(klass){
case 'r':
text = `[${key}]`;
href = `HTML-references.html#refs${key}`;
break;
case 'mt': // media type
case 'l':
text = `"<code class="literal">${text}</code>"`;
break;
case 'eI': // ElementInternals
case 'm':
const n = text.indexOf('(');
if(n > 0){
key = text.slice(0, n);
text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
}
break;
case 'a':
text = text.slice(text.indexOf('.') + 1);
break;
case 'eO': // obslete elem
href = `~HTMLobs#${key}`;
break;
case 'ps':
text = `:${key}`;
break;
case 'xA': // xattr
text = `[${key}]`;
break;
case 'h':
text = `<code class="header">${text}</code>`;
break;
case 'xCode':
return `<a id="_ex-html-${key}">＊</a>`;
break;
case 'en':
return `<span lang="en">${key}</span>`;
break;
}
let tag = tag_map[klass];
if(tag) {
let classname = class_map[klass];
classname = classname ? ` class="${classname}"` : '';
text = `<${tag}${classname}>${text}</${tag}>`;
}
if(indicator !== '^'){
href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
if(!href){
console.log(match); // check error
return match;
}
switch(indicator){
case '$':
text = `<a href="${href}">${text}</a>`;
break;
case '@':
text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
break;
}
}
return text;
}
}
</script>
<script type="text/plain" id="_source_data">
●●options
spec_date:2024-12-17
trans_update:2024-12-18
source_checked:230630
page_state_key:HTML
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/custom-elements.html
nav_prev:HEcanvas
nav_next:HTMLselectors
trans_1st_pub:2016-05-04
●●class_map
e:element
eO:element
a:attr
et:event-type
P:production
st:attr-state
v:value
E:error
jv:js-value
jt:js-type
jA:abstract
xA:xattr
ps:pseudo
css:css
●●tag_map
I:code
m:code
mb:code
eI:code
E:code
c:code
e:code
eO:code
a:code
et:code
st:i
ps:code
jv:code
jt:code
jA:span
h:code
P:code
xA:code
css:code
v:code
V:var
i:i
cite:cite
em:em
●●words_table1
Window: <code>Window</code>
is0:<code class="attr">is</code>
●●words_table
●データ／構造／操作／IDL
IDL:Web IDL
並び:sequence
キー
prototype:
chain:
受入-:adopt::~
作成-法:creating
削除子:deleter::~
可反復:iterable::~
manipulation
accessor::::アクセス子:アクセサ
子たち:children
広義-:inclusive:~
localName
文書内:inDocument
文書外:outOfDocument
内容とする:contain
~label先~control:associated with
上層:top of:~
内包-:include::~
●処理
例外投出あり:rethrow any exceptions::~
再入的:reentrant:~
再入:reentrancy:~
-:fail
漸進的:progressive::~
渡され:passされ:~
不能化d:disabled::不能化
小task:microtask::小 task:小タスク
checkpoint:
旧-:old:~
新-:new:~
instance化:instantiate
処理-中:processing
変化-後の:new
●変数
%文書:document
%名前空間:namespace
%局所~名:localName
%is:is
-:registry → %定義~集合
%定義~集合:-
%定義:-
%定義:definition
%extends:extends
%~formに所有され得るか:formAssociated
%内部特能を不能化するか:disableInternals
%~shadowを不能化するか:disableShadow
%観測される属性~群:observedAttributes
%~lifecycle~callback群:lifecycleCallbacks
%~callback名:callbackName
%観測される属性~群の可反復:observedAttributesIterable
%不能化された特能~群:disabledFeatures
%不能化された特能~群の可反復:disabledFeaturesIterable
%~formに所有され得る値:formAssociatedValue
%~prototype:prototype
%昇格~候補~群:upgradeCandidates
%要素:element
%~map:-
%候補~群:candidates
%候補:candidate
%属性:attribute
%C:C
%構築-結果:constructResult
%反応~stack:reactionsStack
%引数~list:args
%~callback:callback
%属性~名:attributeName
%~queue:queue
%反応~queue:reactions
%e:-
%手続き:-
%例外:-
%値:value
%~target:target
%~shadow:shadow
%妥当か:-
%提出~値:-
%名:name
%~entry~list:entry list
●custom
lifecycle:
:::ライフサイクル
~installする:installation
拡張:extension
昇格:upgrade::~::アップグレード
昇格~法:upgrading
昇格ng:upgrading::昇格::アップグレーディング
切断-:disconnect::~
自律的:autonomous::~
定義-済み:defined
定義-済み時:when-defined
保存-:save:~
予備の:backup::~
内部特能:internals::~
●form提出
無毒化:sanitization::~
模倣-:emulate:~
復旧-:restore::~
拘束~検証:constraint validation::~
支援-:assist:~
再起動:restart:~
埋める:fillする:~
~formを埋める:form-filling
付-:attach::~
に関して難あり:suffering from
~formに所有され得る:form-associated
●環境／UI／呈示
viewer::::ビューア
agent:
生成元が類似な:similar-origin
ARIA:
forward:
main
~style付け:styling
対話的でなくす:non-interactive
編集:editing::~
編集-:edit::~
編集-不能:non-editable
隠す:hideする::~
発声-:announce::~
~focus能:focusability
check::::チェック
~check有無:checkedness
~check有無:checked
checkbox::::チェックボックス
●構文
statement::文
英大文字:upper alpha:~
英小文字:lower alpha:~
●仕様
機能:function:~
隔たり:gap:~
出来事:occurrences:~
今日:today:~
不可欠:crucial:~
図式:schematic diagram:~
自明:trivial:~
不精確:imprecise:~
念頭:mind:~
全装備:full-featured:~
柔軟:flexible:~
flexibility
際どい:edge:きわどい
派生-:derive:~
欠点:drawbacks:~
流儀:fashion:~
複雑:complicated:~
それなりに複雑な:rather-complicated
いくぶん複雑な:somewhat-complicated
複雑に:complicated
組成-:composite::~
消費-:consume:使用
消費者:consumer:使用者
宿題:exercise:~
給-:supply:~
合理化-:rationalise:~
増強-:enhance:~
enhancement
補足-:supplement:~
希望-:hope:~
決着-:settle:~
強いら:forceさ:~
forcing
防護-:guard:~
代理-:proxy:~
検索-:look up:~
維持-:retain:~
拡げて:expandして:~
責務:responsibility:~
地点:points:~
排他的:exclusive:~
作者に公開される:author-exposed
予期されない:unexpected
標準な~HTML要素:the elements of HTML
機能, 意味論の両面で:both functionally and semantically
機能~面でも劣る:not very functional
意のままに:at will
通して:in terms of
他から~~干渉されると困る:delicate
一助:help／helping
楽でない:not a pleasure
見分け:pinpoint
そいつの意志:its own volition
~~想定されている:presumably
~~活動:effort
利用し難く:less usable
微妙な所がある:somewhat subtle
可能な限り:give maximum
気の利いた:fancy
に備わる特別なふるまい:the ways in which 〜 is special
今の所:as of now
今は:For now
すなわち:namely
備える:possess
総称して:collectively
良案:good idea
利する:on behalf of
具体的には:The following examples makes this concrete
summary
作者:you
~~示唆-:allude
できるように:allow
しないよう／できなくする:prevent
満たす:meet
要件に従わない:failing to follow
課される:bound
冒頭:beginning
担当する:responsible to
該当する:fall into this category
着目:zooming in
関わらない:having no interesting
例で~~説明する:illustrate
~~機能:functioning
し忘れる:forget to
述べ:describe
不断に生やし続ける:continually "sprouting"
好ましい:preferable
~sure
〜とする:suppose
~~無視する:does not refer to
し易くする:help
そのような:similar
担う:took on
早くに抜け出る:bail out 〜 early
残す:left
伝える:inform／
伝えてtell
現れ:appear
至らせ:lead
埋められ:shrink
行う:carries out
有する:decorated
起きた:fact
持たせる:gain
置けば:put
在るときは:use its presence
-:catching
-:depend
-:conversion
弾かれる:hit
注釈-:decorated with
選んだ:choice
〜から見て:as viewed by
●未分類
role:
MathML:
記事:article:~
-:collection
contrast:
分類:category:~
透過的:transparent::~
句ng:phrasing::句::フレージング
可触:palpable::~
背後:behind:~
国旗:country flag:~
候補:candidate:~
一定の:certain:~
名前空間~付け:namespacing
-:field
-:allocate
自前で:own
種類:kind
-:ready to
~say
~took
および:plus
内:inside
類:class
別種の:distinct kind
途中で:during the middle
直前:just before
time:
-:successful
より大きい:larger
大きい:large
始-:start
対応ing:corresponding
小さな:small
数:number
~~一括して:together as a batch
~become
早期 return:early-return
~end
~later
so long as
mix-in:mixing in
~point
stack-of-queue
今:now
~~真に一度限りの:truly one-time
〜で:key off
かなり:very
ある:particular
一環／一部:part of
各部:parts
一番上:the top of
不足:not very
別として:apart from
同様:just like before
外す:away
最後に:finally
多様な:large variety of
種々の:variety
様々な:variety of
種々の:various
各種:various
重ねて:twice
~F を返す場合:in the latter case
より低:lower-
●●original_id_map
●●mdn_urls
customelementconstructor:API/CustomElementConstructor
customelementregistry:API/CustomElementRegistry
elementdefinitionoptions:API/ElementDefinitionOptions
elementinternals:API/ElementInternals
validitystateflags:API/ValidityStateFlags
attr-is:HTML/Global_attributes/is
●●link_map
●IDL
xA.CEReactions:#cereactions
CEReactions:#cereactions
E.SyntaxError:~WEBIDL#syntaxerror
E.TypeError:~TC39#sec-native-error-types-used-in-this-standard-typeerror
E.InvalidStateError:~WEBIDL#invalidstateerror
E.NotFoundError:~WEBIDL#notfounderror
E.NotSupportedError:~WEBIDL#notsupportederror
I.Function:~WEBIDL#Function
＊？~WEBIDL#common-Function
Promise:~WEBIDL#idl-promise
USVString:~WEBIDL#idl-USVString
I.CustomElementConstructor:#customelementconstructor
I.CustomElementRegistry:#customelementregistry
I.CustomStateSet:#customstateset
I.Document:~HTMLdom#document
I.ElementDefinitionOptions:#elementdefinitionoptions
I.ElementInternals:#elementinternals
I.ARIAMixin:~ARIA1#ARIAMixin
:~ARIA1#dom-ariamixin
I.File:~FILEAPI#file
I.File:~FILEAPI#dfn-file
I.FormData:~XHR#formdata
I.HTMLButtonElement:~HEforms#htmlbuttonelement
I.HTMLElement:~HTMLdom#htmlelement
I.HTMLFormElement:~HEforms#htmlformelement
I.HTMLQuoteElement:~HEgrouping#htmlquoteelement
I.HTMLUnknownElement:~HTMLdom#htmlunknownelement
I.NodeList:~DOM4#interface-nodelist
I.Window:~WINDOW#window
I.HTMLInputElement:~HEinput#htmlinputelement
I.HTMLLinkElement:~HEmetadata#htmllinkelement
I.Node:~DOM4#interface-node
I.ShadowRoot:~DOM4#interface-shadowroot
I.ValidityState:~HTMLforms#validitystate
I.ValidityStateFlags:#validitystateflags
●m
m.createElement:~DOM4#dom-document-createelement
m.createElementNS:~DOM4#dom-document-createelementns
m.customElements:#dom-window-customelements
m.define:#dom-customelementregistry-define
m.get:#dom-customelementregistry-get
m.getName:#dom-customelementregistry-getname
m.whenDefined:#dom-customelementregistry-whendefined
m.upgrade:#dom-customelementregistry-upgrade
m.attachInternals:#dom-attachinternals
m.attachShadow:~DOM4#dom-element-attachshadow
＠~HEforms#dom-form-elements
m.document.open:~HTMLdynamic#dom-document-open
m.document.write:~HTMLdynamic#dom-document-write
mb.extends:#dom-elementdefinitionoptions-extends
eI.setFormValue:#dom-elementinternals-setformvalue
eI.setValidity:#dom-elementinternals-setvalidity
eI.validationMessage:#dom-elementinternals-validationmessage
eI.shadowRoot:#dom-elementinternals-shadowroot
eI.states:#dom-elementinternals-states
eI.labels:~HEforms#dom-elementinternals-labels
eI.checkValidity:~HTMLforms#dom-elementinternals-checkvalidity
eI.form:~HTMLforms#dom-elementinternals-form
eI.reportValidity:~HTMLforms#dom-elementinternals-reportvalidity
eI.validity:~HTMLforms#dom-elementinternals-validity
eI.willValidate:~HTMLforms#dom-elementinternals-willvalidate
eI.role:#dom-ElementInternals-accessibility-idl
eI.aria*:#dom-ElementInternals-accessibility-idl
st.Checkbox:~HEinput#checkbox-state-(type=checkbox)
[CEReactions]:#cereactions
●a
a.aria-*:~HTMLdep#attr-aria-*
a.aria-checked:~ARIA1#aria-checked
a.aria-disabled:~ARIA1#aria-disabled
a.aria-label:~ARIA1#aria-label
a.async:#attr-script-async
a.data-*:~HTMLdom#attr-data-*
a.disabled:~HTMLforms#attr-fe-disabled
a.form:~HTMLforms#attr-fae-form
a.is:#attr-is
a.name:~HTMLforms#attr-fe-name
a.readonly:#attr-face-readonly
a.role:~HTMLdep#attr-aria-role
a.tabindex:~HTMLinteraction#attr-tabindex
a.readonly:~HEinput#attr-input-readonly
●e
e.blockquote:~HEgrouping#the-blockquote-element
e.button:~HEforms#the-button-element
e.form:~HEforms#the-form-element
e.input:~HEinput#the-input-element
e.label:~HEforms#the-label-element
e.q:~HEtextlevel#the-q-element
e.script:~HEscripting#the-script-element
e.span:~HEtextlevel#the-span-element
●et
et.click:~UIEVENTS#event-type-click
et.keydown:~UIEVENTS#event-type-keydown
et.invalid:~HTMLindex#event-invalid
●js
jt.Object:~TC39#sec-object-type
jA.Get:~TC39#sec-get-o-p
jA.IsConstructor:~TC39#sec-isconstructor
jA.SameValue:~TC39#sec-samevalue
●code 他
l.button:~ARIA1#button
P.PCENChar:#prod-pcenchar
P.PotentialCustomElementName:#prod-potentialcustomelementname
ps.defined:~HTMLselectors#selector-defined
ps.state():~HTMLselectors#selector-custom
ps.invalid:~HTMLselectors#selector-invalid
●用語
~callback反応:#callback-reaction
~custom化された組込みの要素:#customized-built-in-element
~custom要素:#custom-element
~custom要素~定義:#custom-element-definition
~custom要素~定義~集合:#custom-element-definition-set
~custom要素~定義を検索する:#look-up-a-custom-element-definition
~custom要素~構築子:#custom-element-constructor
構築子:#custom-element-constructor
~custom要素~registry:#global-custom-element-registry
~custom要素~反応:#concept-custom-element-reaction
~custom要素~反応~stack:#custom-element-reactions-stack
~custom要素~反応~queue:#custom-element-reaction-queue
~custom要素~反応たちを呼出す:#invoke-custom-element-reactions
~custom要素~昇格~反応を~enqueueする:#enqueue-a-custom-element-upgrade-reaction
~custom要素~callback反応を~enqueueする:#enqueue-a-custom-element-callback-reaction
要素~定義は走っているか:#element-definition-is-running
cD.~lifecycle~callback~map:#concept-custom-element-definition-lifecycle-callbacks
cD.観測される属性~群:#concept-custom-element-definition-observed-attributes
cD.名前:#concept-custom-element-definition-name
定義済み名:#concept-custom-element-definition-name
cD.局所~名:#concept-custom-element-definition-local-name
cD.構築~stack:#concept-custom-element-definition-construction-stack
cD.構築子:#concept-custom-element-definition-constructor
cD.内部特能を不能化するか:#concept-custom-element-definition-disable-internals
cD.~shadowを不能化するか:#concept-custom-element-definition-disable-shadow
cD.~formに所有され得るか:#concept-custom-element-definition-form-associated
cF.~entry構築~algo:#face-entry-construction
cF.状態:#face-state
cF.提出~値:#face-submission-value
cF.検証~anchor:#face-validation-anchor
cF.検証~message:#face-validation-message
cF.妥当性~flag群:#_validity-flags
状態~集合:#states-set
定義-済み時~promise~map:#when-defined-promise-map
i.すでに構築-済みを表す~marker:#concept-already-constructed-marker
妥当な~custom要素~名:#valid-custom-element-name
定義:#custom-element-definition
定義-:#element-definition
要素~定義:#element-definition
~defining:#element-definition
現在の要素~queue:#current-element-queue
自律的~custom要素:#autonomous-custom-element
要素~queue:#element-queue
予備の要素~queue:#backup-element-queue
昇格~反応:#upgrade-reaction
要素を昇格するよう試行する:#concept-try-upgrade
要素を昇格する:#concept-upgrade-an-element
昇格:#upgrades
昇格:#concept-upgrade-an-element
予備の要素~queueは処理-中か:#processing-the-backup-element-queue
適切な要素~queueに~enqueueする:#enqueue-an-element-on-the-appropriate-element-queue
内部~内容~属性~map:#internal-content-attribute-map
●用語 form/intrenals
iN.~target要素:#internals-target
付された内部特能:#attached-internals
~formに所有され得る~custom要素:#form-associated-custom-element
~entry~list:~HTMLforms#entry-list
fD.~entry~list:~XHR#concept-formdata-entry-list
fD.~entry:~HTMLforms#form-entry
fD.名:~HTMLforms#form-entry-name
~entryを作成する:~HTMLforms#create-an-entry
●用語（HTML form/intrenals
自身の拘束を満たして:~HTMLforms#concept-fv-valid
~form提出:~HTMLforms#concept-form-submit
~formに所有され得る要素:~HEforms#form-associated-element
~listされる:~HEforms#category-listed
~label可能:~HEforms#category-label
提出-可能:~HEforms#category-submit
再設定-可能:~HEforms#category-reset
拘束~検証の対象外:~HTMLforms#barred-from-constraint-validation
fe.不能化されて:~HTMLforms#concept-fe-disabled
~formを再設定する:~HTMLforms#concept-form-reset
再設定され:~HTMLforms#concept-form-reset
再設定~algo:~HTMLforms#concept-form-reset-control
~custom妥当性~error~message:~HTMLforms#custom-validity-error-message
~form所有者:~HTMLforms#form-owner
~form提出:~HTMLforms#form-submission
~form所有者を設定し直す:~HTMLforms#reset-the-form-owner
対話的に検証する:~HTMLforms#interactively-validate-the-constraints
妥当性~状態:~HTMLforms#validity-states
~label先~control:~HEforms#labeled-control
●用語（HTML
接続されたとき:~HTMLINFRA#becomes-connected
切断されたとき:~HTMLINFRA#becomes-disconnected
適用-可能な仕様:~HTMLINFRA#other-applicable-specifications
~live:~HTMLINFRA#live
分類:~HTMLdom#concept-element-categories
内容~属性:~HTMLdom#concept-element-attributes
内容~model:~HTMLdom#concept-element-content-model
この要素を利用できる文脈:~HTMLdom#concept-element-contexts
~accessibilityの考慮点:~HTMLdom#concept-element-accessibility-considerations
~DOM~interface:~HTMLdom#concept-element-dom
~flow内容:~HTMLdom#flow-content-2
大域~属性:~HTMLdom#global-attributes
可触~内容:~HTMLdom#palpable-content-2
句ng内容:~HTMLdom#phrasing-content-2
透過的:~HTMLdom#transparent
表現-:~HTMLdom#represents
要素~型:~HTMLINFRA#element-type
真偽-属性:~HTMLcms#boolean-attribute
生成元が類似な~window~agent:~WAPI#similar-origin-window-agent
関連な~agent:~WAPI#relevant-agent
例外を報告する:~WAPI#report-an-exception
rM.大域~obj:~WAPI#concept-realm-global
関連な大域~obj:~WAPI#concept-relevant-global
小taskを~queueする:~WAPI#queue-a-microtask
小task~checkpoint:~WAPI#perform-a-microtask-checkpoint
~focus可能:~HTMLinteraction#focusable
属する閲覧~文脈:~HTMLds#concept-document-bc
結付けられた文書:~WINDOW#concept-document-window
~HTML要素~構築子:~HTMLdom#html-element-constructors
~HTMLnav#restore-persisted-state
●用語（外部
~HTML名前空間:~INFRA#html-namespace
~ASCII英大文字:~INFRA#ascii-upper-alpha
~ASCII英小文字:~INFRA#ascii-lower-alpha
~XML互換:~HTMLINFRA#xml-compatible
~list:~INFRA#list
空:~INFRA#list-is-empty
~cloneする:~INFRA#list-clone
付加する:~INFRA#list-append
拡張する:~INFRA#list-extend
集合:~INFRA#ordered-set
set.付加する:~INFRA#set-append
~popする:~INFRA#stack-pop
~pushする:~INFRA#stack-push
~dequeueする:~INFRA#queue-dequeue
~map:~INFRA#ordered-map
~callback this 値:~WEBIDLjs#dfn-callback-this-value
~callback関数で構築する:~WEBIDLjs#construct-a-callback-function
~callback関数を呼出す:~WEBIDLjs#invoke-a-callback-function
~IDL値に変換する:~WEBIDLjs#dfn-convert-javascript-to-idl-value
拡張d属性:~WEBIDL#dfn-extended-attribute
新たな~promise:~WEBIDLjs#a-new-promise
却下される~promise:~WEBIDLjs#a-promise-rejected-with
解決される~promise:~WEBIDLjs#a-promise-resolved-with
~promiseを解決する:~WEBIDLjs#resolve
属する~realm:~WEBIDLjs#dfn-associated-realm
el.~custom:~DOM4#concept-element-custom
el.定義-済み:~DOM4#concept-element-defined
el.~custom要素~状態:~DOM4#concept-element-custom-element-state
el.~custom要素~定義:~DOM4#concept-element-custom-element-definition
el.~is0値:~DOM4#concept-element-is-value
~node文書:~DOM4#concept-node-document
範囲:~DOM4#concept-range
接続されて:~DOM4#connected
~shadow根:~DOM4#concept-shadow-root
~shadow~host:~DOM4#element-shadow-host
el.~shadow根:~DOM4#concept-element-shadow-root
el.名前空間:~DOM4#concept-element-namespace
el.局所~名:~DOM4#concept-element-local-name
attr.局所~名:~DOM4#concept-attribute-local-name
attr.値:~DOM4#concept-attribute-value
attr.名前空間:~DOM4#concept-attribute-namespace
~shadowも含めた子孫:~DOM4#concept-shadow-including-descendant
~shadowも含めた広義-子孫:~DOM4#concept-shadow-including-inclusive-descendant
~shadowも含めた~tree順序:~DOM4#concept-shadow-including-tree-order
要素の内部特能から可用か:~DOM4#shadowroot-available-to-element-internals
属性~list:~DOM4#concept-element-attribute
要素~interface:~DOM4#concept-element-interface
＠~DOM4#concept-node-adopt
＠~DOM4#concept-element-attributes-change
＠~DOM4#concept-element-attributes-append
＠~DOM4#concept-element-attributes-remove
＠~DOM4#concept-element-attributes-replace
＠~DOM4#concept-create-element
要素を作成する:~DOM4#concept-create-element
~nodeを~cloneする:~DOM4#concept-node-clone
~role:~ARIA1#dfn-role
~access可能な名前:~ARIA1#dfn-accessible-name
~tokenに対し要素を作成する:~HTMLparsing#create-an-element-for-the-token
編集-可能:~EXEC-COMMAND#editable
疑似類:~SELECTORS4#pseudo-class
●●html_code_list
■custom-element-states-1
<％script>
class LabeledCheckbox extends HTMLElement {
constructor() {
super();
this._internals = this.attachInternals();
this.addEventListener('click', this._onClick.bind(this));
％
const %shadowRoot = this.attachShadow({mode: 'closed'});
%shadowRoot.innerHTML =
`<style>
:host::before {
content: '[ ]';
white-space: pre;
font-family: monospace;
}
:host(:state(checked))::before { content: '[x]' }
</style>
<slot>Label</slot>`;
}
％
get checked() { return this._internals.states.has('checked'); }
％
set checked(%flag) {
if (%flag)
this._internals.states.add('checked');
else
this._internals.states.delete('checked');
}
％
_onClick(%event) {
this.checked = !this.checked;
}
}
％
customElements.define('labeled-checkbox', LabeledCheckbox);
<％/script>
％
<style>
labeled-checkbox { border: dashed red; }
labeled-checkbox:state(checked) { border: solid; }
</style>
％
<labeled-checkbox>これをチェックする必要があります</labeled-checkbox>
■custom-element-states-2
<％script>
class QuestionBox extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'closed'});
shadowRoot.innerHTML =
`<div><slot>質問</slot></div>
<labeled-checkbox part='checkbox'>はい</labeled-checkbox>`;
}
}
customElements.define('question-box', QuestionBox);
<％/script>
％
<style>
question-box::part(checkbox) { color: red; }
question-box::part(checkbox):state(checked) { color: green; }
</style>
％
<question-box>続けますか？</question-box>
●●trans_metadata
<p>
~THIS_PAGEは、~WHATWGによる HTML 仕様の
<a href="~SPEC_URL">§ Custom elements</a>
を日本語に翻訳したものです。
~PUB
</p>
</script>
</head>
<body>
<header>
<hgroup>
<h1>HTML — カスタム要素</h1>
</hgroup>
</header>
<hr>
<main id="MAIN" hidden>
<section id="custom-elements">
<h3 title="Custom elements">4.13. ~custom要素</h3>
<section id="custom-elements-intro">
<h4 title="Introduction">4.13.1. 序論</h4>
◎非規範的
<p>
`~custom要素$は、
“全装備な” ~DOM要素を自前で築く仕方を作者に供する。
作者は常に，［
標準でない要素を自身の文書に利用して，