HTML-custom-ja.html

<!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 'sl':
	text = `[[${key}]]`;
	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:2025-04-29
trans_update:2025-04-30
source_checked:250314
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
sl:js-slot
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
sl: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
	何もしない:no-op

	●変数
	%文書:document
	%名前空間:namespace
	%局所~名:localName
	%名前:name
	%名:name
	%is:is
	%定義:-
	%定義: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
	%切断-時の~callback:disconnectedCallback
	%接続-時の~callback:connectedCallback
	%属性~名:attributeName
	%~queue:queue
	%反応~queue:reactions
	%e:-
	%手続き:-
	%例外:-
	%値:value
	%~target:target
	%~shadow:shadow
	%妥当か:-
	%提出~値:-
	%~entry~list:entry list
	%~registry:registry
	%広義-子孫:inclusiveDescendant

	●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:
surrounding:
	生成元が類似な: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:~
理屈:reasoning:~

	作者に公開される: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
	登場以前:predate
	~~任意で選べる:opt in
	取って代わる:supercede
	委ねられる:Left as
	~~要求どおり:as it ought to do

	●未分類
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-
	し直-:re-
	存在するとき:existence of
	順に:one after the other
	場:place

●●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.Node:~DOM4#interface-node → ~node
	I.Document:~HTMLdom#document → 文書
	I.Element:~DOM4#interface-element → 要素
I.ShadowRoot:~DOM4#interface-shadowroot
	→ ~shadow根
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.new CustomElementRegistry:#dom-customelementregistry
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.initialize:#dom-customelementregistry-initialize

m.attachInternals:#dom-attachinternals
m.attachShadow:~DOM4#dom-element-attachshadow
	＠~DOM4#dom-parentnode-movebefore
	＠~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＠~ARIA1#idl-def-ariamixin-role
	eI.aria*＠~ARIA1#idl-def-ariamixin-ariaactivedescendantelement


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要素~定義を検索する:#look-up-a-custom-element-definition
~custom要素~registryを検索する:#look-up-a-custom-element-registry
~custom要素~構築子:#custom-element-constructor
	構築子:#custom-element-constructor
作動中な~custom要素~構築子~map:#active-custom-element-constructor-map

~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


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

cR.視野~付きか:#is-scoped
cR.視野~付き文書~集合:#scoped-document-set
cR.~custom要素~定義~集合:#custom-element-definition-set
cR.要素~定義は走っているか:#element-definition-is-running
cR.定義-済み時~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
文書の中の特定0の要素たちを昇格する:#upgrade-particular-elements-within-a-document
昇格:#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#the-document-object
分類:~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

	●用語（外部

~surrounding~agent:~TC39#surrounding-agent

~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

~node:~DOM4#concept-node
要素:~DOM4#concept-element
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
el.~shadow根:~DOM4#concept-element-shadow-root
el.名前空間:~DOM4#concept-element-namespace
el.局所~名:~DOM4#concept-element-local-name
el.~custom要素~registry:~DOM4#element-custom-element-registry
doc.~custom要素~registry:~DOM4#document-custom-element-registry
sR.~custom要素~registry:~DOM4#shadowroot-custom-element-registry
attr.局所~名:~DOM4#concept-attribute-local-name
attr.値:~DOM4#concept-attribute-value
attr.名前空間:~DOM4#concept-attribute-namespace
~node文書:~DOM4#concept-node-document
範囲:~DOM4#concept-range
接続されて:~DOM4#connected
~shadow根:~DOM4#concept-shadow-root
~shadow~host:~DOM4#element-shadow-host
広義-子孫:~DOM4#concept-tree-inclusive-descendant
~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-move-ext
	＠~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要素を自前で築く仕方を作者に供する。
作者は常に，［
標準でない要素を自身の文書に利用して，
~appに特有な挙動を~scripting等が起きた後に追加する
］こともできたが、
そのような要素は，歴史的に不適合とされてきており，機能~面でも劣る。
~custom要素を`定義-$することにより、
作者は，［
要素を適正に構築する方法
］および［
その~classに属する要素が変化に対しどう反応すべきか
］を構文解析器に伝えれるようになる。
◎
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.
</p>

<p>
~custom要素は、［
（標準な~HTML要素の様な）
既存の~platform特能
］を［
（`~custom要素~定義$の様な）
より低~levelな，作者に公開される拡張能~地点
］を通して説明することにより，
より大きな “~platformを合理化する” 労の一環を成す。
今日の~custom要素の能力には，まだ多くの制限があり、
~HTMLの既存の要素の挙動を
— 機能, 意味論の両面で —
全部的には説明できないが、
この隔たりは，時を経れば埋められるものと希望されている。
◎
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.
</p>

				<section id="custom-elements-autonomous-example">
<h5 title="Creating an autonomous custom element">4.13.1.1. 自律的~custom要素の作成-法</h5>

◎非規範的

<p>
`自律的~custom要素$の作成-法を例で~~説明するため、
ここでは，小さな国旗~icon（ `flag-icon^e ）の描画を~capsule化する~custom要素を定義してみる。
目標は、
次の様な利用を可能にすることである：
◎
For the purposes of illustrating how to create an autonomous custom element, let's define a custom element that encapsulates rendering a small icon for a country flag. Our goal is to be able to use it like so:
</p>

<pre class="lang-html">
&lt;flag-icon country="nl"&gt;&lt;/flag-icon&gt;
</pre>

<p>
これを行うため、
先ず，~custom要素~用に `HTMLElement$I を拡張する~classを宣言する：
◎
To do this, we first declare a class for the custom element, extending HTMLElement:
</p>

<pre class="lang-js">
class FlagIcon extends HTMLElement {
  constructor() {
    super();
    this._countryCode = null;
  }

  static observedAttributes = ["country"];

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

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

  _updateRendering() {
/* <span class="comment">
読者の行使に委ねられる。
が，おそらく、
`this.ownerDocument.defaultView＠~WINDOW#dom-document-defaultview$c で挿入-先の文書が`属する閲覧~文脈$の有無を検査して，
無いなら何もしないよう求まれるであろう。
◎
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.
</span> */
  }
}
</pre>

<p>
次に，この~classを利用して要素を定義する必要がある：
◎
We then need to use this class to define the element:
</p>

<pre class="lang-js">
`customElements$m.define("flag-icon", FlagIcon);
</pre>

<p>
この時点で、
上の~codeは働くことになる。
構文解析器は、
`flag-icon^e ~tagに出会う度に，［
`FlagIcon^jt ~classの新たな~instanceを構築して，
その新たな `country^c 属性について上の~codeに伝えてくる
］ことになる
— ~codeは、
それを利用して当の要素の内部~状態を設定し，
（適切なときは）要素の描画も更新する。
◎
At this point, our above code will work! The parser, whenever it sees the flag-icon tag, will construct a new instance of our FlagIcon class, and tell our code about its new country attribute, which we then use to set the element's internal state and update its rendering (when appropriate).
</p>

<p>
`flag-icon^e 要素を~DOM~APIを利用して作成することもできる：
◎
You can also create flag-icon elements using the DOM API:
</p>

<pre class="lang-js">
const %flagIcon = document.createElement("flag-icon")
%flagIcon.country = "jp"
document.body.appendChild(%flagIcon)
</pre>

<p>
最後に，`~custom要素~構築子$自身を利用して作成することもできる。
すなわち、
上の~codeは，次と等価になる：
◎
Finally, we can also use the custom element constructor itself. That is, the above code is equivalent to:
</p>

<pre class="lang-js">
const %flagIcon = new FlagIcon()
%flagIcon.country = "jp"
document.body.appendChild(%flagIcon)
</pre>

				</section>
				<section id="custom-elements-face-example">
<h5 title="Creating a form-associated custom element">4.13.1.2. ~formに所有され得る~custom要素の作成-法</h5>

◎非規範的

<p>
`自律的~custom要素$は、［
~T 値を返す静的な `formAssociated^c ~prop
］を追加すれば，`~formに所有され得る~custom要素$になる。
`ElementInternals$I ~interfaceは、
作者が~form~control要素に共通な各種［
関数, ~prop
］を実装し易くする。
◎
Adding a static formAssociated property, with a true value, makes an autonomous custom element a form-associated custom element. The ElementInternals interface helps you to implement functions and properties common to form control elements.
</p>

<pre class="lang-js">
class MyCheckbox extends HTMLElement {
  static formAssociated = true;
  static observedAttributes = ['checked'];

  constructor() {
    super();
    this._internals = this.attachInternals();
    this.addEventListener('click', this._onClick.bind(this));
  }

  get form() { return this._internals.form; }
  get name() { return this.getAttribute('name'); }
  get type() { return this.localName; }

  get checked() { return this.hasAttribute('checked'); }
  set checked(%flag) { this.toggleAttribute('checked', Boolean(%flag)); }

  attributeChangedCallback(%name, %oldValue, %newValue) {
    /* <span class="comment">
%name は常に， `observedAttributes^c が返す結果のどれか（ここでは `checked^l のみ）
◎
name will always be "checked" due to observedAttributes
</span> */
    this._internals.setFormValue(this.checked ? 'on' : null);
  }

  _onClick(%event) {
    this.checked = !this.checked;
  }
}
`customElements$m.define('my-checkbox', MyCheckbox);
</pre>

<p>
作者は、
組込みの`~formに所有され得る要素$の様に，
~custom要素 `my-checkbox^e を利用できる。
例えば、
`my-checkbox^e 要素を `form$e 内に置けば それが`~form所有者$になり，
`label$e 内に置けば その`~label先~control$になる
— 当の `form$e が提出されるときには、
`my-checkbox^e の実装が供する~dataが送信されるようになる。
◎
You can use the custom element my-checkbox like a built-in form-associated element. For example, putting it in form or label associates the my-checkbox element with them, and submitting the form will send data provided by my-checkbox implementation.
</p>


<pre class="lang-html">
&lt;form action="..." method="..."&gt;
  &lt;label&gt;&lt;my-checkbox name="agreed"&gt;&lt;/my-checkbox&gt; I read the agreement.&lt;/label&gt;
  &lt;input type="submit"&gt;
&lt;/form&gt;
</pre>

				</section>
				<section id="custom-elements-accessibility-example">
<h5 title="Creating a custom element with default accessible roles, states, and properties">4.13.1.3. 既定の~access可能な~role, 状態, ~propを伴う~custom要素の作成-法</h5>

◎非規範的

<p>
`ElementInternals$I の適切な~propを利用すれば、
~custom要素は，既定の~accessibility意味論を有せるようになる。
次の~codeは、
前~節の~formに所有され得る~checkboxを拡げて，その既定の［
~role／~check有無
］を
— ~accessibility技術から見て適正に —
設定する：
◎
By using the appropriate properties of ElementInternals, your custom element can have default accessibility semantics. The following code expands our form-associated checkbox from the previous section to properly set its default role and checkedness, as viewed by accessibility technology:
</p>

<pre class="lang-js">
class MyCheckbox extends HTMLElement {
  static formAssociated = true;
  static observedAttributes = ['checked'];

  constructor() {
    super();
    this._internals = this.attachInternals();
    this.addEventListener('click', this._onClick.bind(this));

<mark>    this._internals.role = 'checkbox';
    this._internals.ariaChecked = 'false';</mark>
  }

  get form() { return this._internals.form; }
  get name() { return this.getAttribute('name'); }
  get type() { return this.localName; }

  get checked() { return this.hasAttribute('checked'); }
  set checked(%flag) { this.toggleAttribute('checked', Boolean(%flag)); }

  attributeChangedCallback(%name, %oldValue, %newValue) {
    /* <span class="comment">
%name は常に， `observedAttributes^c が返す結果のどれか（ここでは `checked^l のみ）
◎
name will always be "checked" due to observedAttributes
</span> */
    this._internals.setFormValue(this.checked ? 'on' : null);
<mark>    this._internals.ariaChecked = this.checked;</mark>
  }

  _onClick(%event) {
    this.checked = !this.checked;
  }
}
customElements.define('my-checkbox', MyCheckbox);
</pre>

<p>
組込みの要素と同様に、
これらは既定でしかないことに注意
— ~page作者は、［
`role$a 属性, 各種 `aria-*$a 属性
］を利用して，それを上書きできる：
◎
Note that, like for built-in elements, these are only defaults, and can be overridden by the page author using the role and aria-* attributes:
</p>

<pre class="lang-html bad">
&lt;!-- <span class="comment">
この~markupは不適合
◎
This markup is non-conforming
</span> --&gt;
&lt;input type="checkbox" checked role="button" aria-checked="false"&gt;
</pre>

<pre class="lang-html bad">
&lt;!-- <span class="comment">
この~markupは、
おそらく，~custom要素の作者が意図したものではない
◎
This markup is probably not what the custom element author intended
</span> --&gt;
&lt;my-checkbox role="button" checked aria-checked="false"&gt;
</pre>

<p>
~custom要素の作者は、
当の要素の~accessibility意味論を成す各~側面のうち，どれが強い~native意味論を有するか
— すなわち，~custom要素の利用者は上書きするべきでないか —
を言明することが奨励される。
上の例では， `my-checkbox^e 要素の作者は、
その［
`~role$, `aria-checked$a 値
］は強い~native意味論を有するものと言明することになろう
— したがって，上のような~codeは忌避される。
◎
Custom element authors are encouraged to state what aspects of their accessibility semantics are strong native semantics, i.e., should not be overridden by users of the custom element. In our example, the author of the my-checkbox element would state that its role and aria-checked values are strong native semantics, thus discouraging code such as the above.
</p>

				</section>
				<section id="custom-elements-customized-builtin-example">
<h5 title="Creating a customized built-in element">4.13.1.4. ~custom化された組込みの要素の作成-法</h5>

◎非規範的

<p>
`~custom化された組込みの要素$は、
別種の`~custom要素$であり，その定義は少しばかり異なる。
また、
その利用は，`自律的~custom要素$に比較してかなり異なる。
それが存在するのは、［
新たな~custom機能性で拡張する
］ことにより［
既存の~HTML要素の挙動
］の再利用を許容するためである。
この再利用は重要になる
— あいにく，~HTML要素の既存の挙動の多くは、
純粋に`自律的~custom要素$だけでは~~再現できないので。
代わりに，`~custom化された組込みの要素$では、［
構築~時に~customな挙動を~installすること,
【！＊】~lifecycle~hook,
既存の要素への~prototype~chain
］が許容され、
本質的に，これらの能力を既存の要素の上層に “mix-in” する。
◎
Customized built-in elements are a distinct kind of custom element, which are defined slightly differently and used very differently compared to autonomous custom elements. They exist to allow reuse of behaviors from the existing elements of HTML, by extending those elements with new custom functionality. This is important since many of the existing behaviors of HTML elements can unfortunately not be duplicated by using purely autonomous custom elements. Instead, customized built-in elements allow the installation of custom construction behavior, lifecycle hooks, and prototype chain onto existing elements, essentially "mixing in" these capabilities on top of the already-existing element.
</p>

<p>
`~custom化された組込みの要素$には、
`自律的~custom要素$とは別個な構文が要求される
— ~UAや他の~softwareは、
当の要素の［
意味論, 挙動
］を要素の`局所~名$elで識別しているので。
すなわち、［
既存の挙動の上層に，`~custom化された組込みの要素$の概念を築く
］ためには，［
拡張された要素が自身の元の局所~名を維持する
］ことが不可欠になる。
◎
Customized built-in elements require a distinct syntax from autonomous custom elements because user agents and other software key off an element's local name in order to identify the element's semantics and behavior. That is, the concept of customized built-in elements building on top of existing behavior depends crucially on the extended elements retaining their original local name.
</p>

<p>
次の例では、［
`plastic-button^e と命名された`~custom化された組込みの要素$
］を作成する。
それは，通常の~buttonの様に挙動するが、
~click時には気の利いた~animation効果が追加される。
前と同様，~classを定義する所から始めるが、
今度は， `HTMLElement$I でなく `HTMLButtonElement$I を拡張する：
◎
In this example, we'll be creating a customized built-in element named plastic-button, which behaves like a normal button but gets fancy animation effects added whenever you click on it. We start by defining a class, just like before, although this time we extend HTMLButtonElement instead of HTMLElement:
</p>

<pre class="lang-js">
class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

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

<p>
上のような~custom要素を定義するときには、
`extends$mb ~optionも指定する必要がある：
◎
When defining our custom element, we have to also specify the extends option:
</p>

<pre class="lang-js">
`customElements$m.define("plastic-button", PlasticButton, { extends: "button" });
</pre>

<p>
一般に，どの名前の要素を拡張しているかは、
どの要素~interfaceを拡張しているか見るだけでは決定できない。
多くの要素は、
同じ~interfaceを共有しているので
（例： `q$e と `blockquote$e は `HTMLQuoteElement$I を共有している）。
◎
In general, the name of the element being extended cannot be determined simply by looking at what element interface it extends, as many elements share the same interface (such as q and blockquote both sharing HTMLQuoteElement).
</p>

<p>
構文解析される~HTML~source~textから`~custom化された組込みの要素$を構築するためには、
`is$a 属性を利用する
— ここでは， `button$e 要素~上で：
◎
To construct our customized built-in element from parsed HTML source text, we use the is attribute on a button element:
</p>

<pre class="lang-html">
&lt;button `is$a="plastic-button"&gt;Click Me!&lt;/button&gt;
</pre>

<p>
`~custom化された組込みの要素$を`自律的~custom要素$として利用するよう試行しても、
`働かない^em。
すなわち、
`&lt;plastic-button&gt;Click me?&lt;/plastic-button&gt;^c
は、
単純に［
特別な挙動を何も伴わない `HTMLElement$I
］を作成することになる。
◎
Trying to use a customized built-in element as an autonomous custom element will not work; that is, &lt;plastic-button&gt;Click me?&lt;/plastic-button&gt; will simply create an HTMLElement with no special behavior.
</p>

<p>
~custom化された組込みの要素を~program的に作成する必要がある場合、
`createElement()$m を次のような形で利用できる：
◎
If you need to create a customized built-in element programmatically, you can use the following form of createElement():
</p>

<pre class="lang-js">
const %plasticButton = document.createElement("button", { is: "plastic-button" });
%plasticButton.textContent = "Click me!";
</pre>

<p>
構築子も、
前と同じく働くことになる：
◎
And as before, the constructor will also work:
</p>

<pre class="lang-js">
const %plasticButton2 = new PlasticButton();
console.log(%plasticButton2.localName);  /* <span class="comment">
`button^l と出力される
◎
will output "button"
</span> */
console.assert(%plasticButton2 instanceof PlasticButton);
console.assert(%plasticButton2 instanceof HTMLButtonElement);
</pre>

<p>
~custom化された組込みの要素を~program的に作成した場合、
`is$a 属性は，明示的に設定されてないので~DOM内には無い
— しかしながら、
`直列化-時には出力に追加される＠~HTMLwriting#attr-is-during-serialization$：
◎
Note that when creating a customized built-in element programmatically, the is attribute will not be present in the DOM, since it was not explicitly set. However, it will be added to the output when serializing:
</p>

<pre class="lang-js">
console.assert(!%plasticButton.hasAttribute("is"));
console.log(%plasticButton.outerHTML); /* <span class="comment">
`&lt;button is="plastic-button"&gt;&lt;/button&gt;^l
と出力される
◎
will output '&lt;button is="plastic-button"&gt;&lt;/button&gt;'
</span> */
</pre>

<p>
それがどう作成されたかに関わらず，
`button$e に備わる特別なふるまい
— ~focus時の挙動, `~form提出$に関与する能, `disabled$a 属性, 等々 —
すべては、この種の “`plastic^en な~button” にも適用される。
◎
Regardless of how it is created, all of the ways in which button is special apply to such "plastic buttons" as well: their focus behavior, ability to participate in form submission, the disabled attribute, and so on.
</p>

<p id="customized-built-in-element-restrictions">
`~custom化された組込みの要素$は、
既存の~HTML要素を［
~UAが給する有用な挙動や~APIが備わる
］よう拡張できるように設計された。
そのようなわけで、
拡張できるのは［
この仕様に定義される既存の~HTML要素
］に限られる。
次に挙げる旧来の要素
— `要素~interface$として `HTMLUnknownElement$I を利用するものと定義された要素 —
は拡張できない
⇒
`applet$eO†,
`bgsound$eO,
`blink$eO,
`isindex$eO,
`keygen$eO,
`multicol$eO,
`nextid$eO,
`spacer$eO
◎
Customized built-in elements are designed to allow extension of existing HTML elements that have useful user-agent supplied behavior or APIs. As such, they can only extend existing HTML elements defined in this specification, and cannot extend legacy elements such as bgsound, blink, isindex, keygen, multicol, nextid, or spacer that have been defined to use HTMLUnknownElement as their element interface.
</p>

<p class="trans-note">【†
`applet^eO は、この訳による補完。
】</p>

<p>
この要件がある理由には、
将来との互換性もある。
仮に，`~custom化された組込みの要素$が現在は未知な要素
— 例えば `combobox^e とする —
を拡張するように定義された場合、
そのように派生された要素の消費者たちは［
その基底~要素 `combobox^e は，~UAが給する挙動に関わらないこと
］に依存するようになり，
この仕様が将来に `combobox^e 要素を定義できなくなる。
◎
One reason for this requirement is future-compatibility: if a customized built-in element was defined that extended a currently-unknown element, for example combobox, this would prevent this specification from defining a combobox element in the future, as consumers of the derived customized built-in element would have come to depend on their base element having no interesting user-agent-supplied behavior.
</p>

				</section>
				<section id="custom-elements-autonomous-drawbacks">
<h5 title="Drawbacks of autonomous custom elements">4.13.1.5. 自律的~custom要素の欠点</h5>

◎非規範的

<p>
以下に指定されるとおり，および上で~~示唆したように、
単純に［
`taco-button^e と称される要素を定義して利用した
］としても，［
その種の要素が~buttonを`表現-$する
］ことにはならない。
すなわち、［
~web~browser, 探索~engine, ~accessibility技術
］などの~toolは、
結果の要素を，単に［
定義された名前に基づいて，自動的に~buttonとして扱う
］ことにはならない。
◎
As specified below, and alluded to above, simply defining and using an element called taco-button does not mean that such elements represent buttons. That is, tools such as web browsers, search engines, or accessibility technology will not automatically treat the resulting element as a button just based on its defined name.
</p>

<p>
`自律的~custom要素$を利用しつつ，［
様々な利用者から欲される，~buttonの意味論
］を伝達するためには、
いくつかの技法を使役する必要がある：
◎
To convey the desired button semantics to a variety of users, while still using an autonomous custom element, a number of techniques would need to be employed:
</p>

<ul>
	<li>
`tabindex$a 属性を追加すれば、
`taco-button^e 要素は`~focus可能$になる。
この場合、
`taco-button^e が論理的に不能化されたときには，
`tabindex$a 属性も除去する必要があることに注意。
◎
The addition of the tabindex attribute would make the taco-button focusable. Note that if the taco-button were to become logically disabled, the tabindex attribute would need to be removed.
</li>
	<li>
~ARIA~role, および各種~ARIA［
状態／~prop
］を追加すれば、
意味論を~accessibility技術に伝達する一助になる。
例えば，`~role$を `button$l に設定すれば、［
 “要素は~buttonである” という意味論を伝達する
］ことになり，［
利用者が，~accessibility技術の下で、
通例の~buttonの様に，当の~controlとヤリトリすること
］を可能化する。
また， `aria-label$a ~propを設定して、
当の~buttonに`~access可能な名前$を与えることも必要yである
— さもなければ，~accessibility技術は、
子~text~nodeたちを辿って，それらを発声することになる。
また，~buttonが論理的に不能化されたときには、
`aria-disabled$a 状態を `true^l に設定すれば，
その不能化d状態は~accessibility技術へ伝達される。
◎
The addition of an ARIA role and various ARIA states and properties helps convey semantics to accessibility technology. For example, setting the role to "button" will convey the semantics that this is a button, enabling users to successfully interact with the control using usual button-like interactions in their accessibility technology. Setting the aria-label property is necessary to give the button an accessible name, instead of having accessibility technology traverse its child text nodes and announce them. And setting the aria-disabled state to "true" when the button is logically disabled conveys to accessibility technology the button's disabled state.
</li>
	<li>
~buttonに共通的に期待される挙動を取扱うために~event~handlerを追加することも、
~web~browser利用者に~buttonの意味論を伝達する一助になる。
この事例で最も関連な~event~handlerは、適切な `keydown$et ~eventを代理して， `click$et ~event化するものになるであろう
— そうすれば、~keyboardでも~clickでも，~buttonを作動化できるようになるので。
◎
The addition of event handlers to handle commonly-expected button behaviors helps convey the semantics of the button to web browser users. In this case, the most relevant event handler would be one that proxies appropriate keydown events to become click events, so that you can activate the button both with keyboard and by clicking.
</li>
	<li>
既定で供される視覚的な~style付けに加えて、
`taco-button^e 要素は，
論理的な状態~変化
— 不能化される（ `disabled^a 属性）など —
を反映するときにも更新される必要がある。
すなわち、
~stylesheet内にある `taco-button^e 用の規則には，
それが何であれ `taco-button[disabled]^css 用の規則も必要になる。
◎
In addition to any default visual styling provided for taco-button elements, the visual styling will also need to be updated to reflect changes in logical state, such as becoming disabled; that is, whatever style sheet has rules for taco-button will also need to have rules for taco-button[disabled].
</li>
</ul>

<p>
これらの点を念頭に、［
~button意味論を伝達する責務を担う，全装備な `taco-button^e
］（不能化される能も含む）は，次の様な見かけの何かになろう：
◎
With these points in mind, a full-featured taco-button that took on the responsibility of conveying button semantics (including the ability to be disabled) might look something like this:
</p>

<pre class="lang-js" id="custom-elements-autonomous-drawbacks-example">
class TacoButton extends HTMLElement {
  static observedAttributes = ["disabled"];

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._internals.role = "button";

    this.addEventListener("keydown", %e => {
      if (%e.code === "Enter" || %e.code === "Space") {
        this.dispatchEvent(new PointerEvent("click", {
          bubbles: true,
          cancelable: true
        }));
      }
    });

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

    this._observer = new MutationObserver(() => {
      this._internals.ariaLabel = this.textContent;
    });
  }

  connectedCallback() {
    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(%flag) {
    this.toggleAttribute("disabled", Boolean(%flag));
  }

  attributeChangedCallback(%name, %oldValue, %newValue) {
/* <span class="comment">
%name は常に， `observedAttributes^c が返す結果のどれか（ここでは `disabled^l のみ）
◎
name will always be "disabled" due to observedAttributes
</span> */
    if (this.disabled) {
      this.removeAttribute("tabindex");
      this._internals.ariaDisabled = "true";
    } else {
      this.setAttribute("tabindex", "0");
      this._internals.ariaDisabled = "false";
    }
  }
}
</pre>

<p>
このそれなりに複雑な要素~定義をもってしても、
要素は，消費者にとって利用するのは楽でない：
それは、
そいつの意志で `tabindex$a を “不断に生やし続ける” ことになり、
それが選んだ `tabindex="0"^c に対する~focus能の挙動は，
現在の~platformにおける~buttonの挙動に合致しないこともあろう。
このことは、
今の所，~custom要素~用には既定の［
~focus時の挙動
］を指定する仕方がなく、
そうするためには， `tabindex$a 属性の利用を強いられるからである
（それは、通例的には［
消費者が既定の挙動を上書きする
］ためとして予約されるにもかかわらず）。
◎
Even with this rather-complicated element definition, the element is not a pleasure to use for consumers: it will be continually "sprouting" tabindex attributes of its own volition, and its choice of tabindex="0" focusability behavior may not match the button behavior on the current platform. This is because as of now there is no way to specify default focus behavior for custom elements, forcing the use of the tabindex attribute to do so (even though it is usually reserved for allowing the consumer to override default behavior).
</p>

<p>
対照的に，前~節に示した単純な`~custom化された組込みの要素$は、
`button$e 要素の［
意味論, 挙動
］を自動的に継承することになるので，
これらの挙動を手動で実装する必要はない。
一般に、［
自明でない［
意味論, 挙動
］を伴う，~HTMLの既存の要素
］の上層に築かれる どの要素~用にも，
`~custom化された組込みの要素$の方が［
開発する, 保守する, 消費する
］のは容易になる。
◎
In contrast, a simple customized built-in element, as shown in the previous section, would automatically inherit the semantics and behavior of the button element, with no need to implement these behaviors manually. In general, for any elements with nontrivial behavior and semantics that build on top of existing elements of HTML, customized built-in elements will be easier to develop, maintain, and consume.
</p>

				</section>
				<section id="custom-elements-upgrades-examples">
<h5 title="Upgrading elements after their creation">4.13.1.6. 要素の作成~後の昇格~法</h5>

◎非規範的

<p>
`要素~定義$は，いつでも生じさせ得るので、
~customでない要素を`作成して＠~DOM4#concept-create-element$から，後で
— 適切な`~custom要素~定義$が登録された後に —
`~custom要素$になるようにすることもできる。
この処理nは、
通常の要素から~custom要素への “昇格ng” と呼ばれる。
◎
Because element definition can occur at any time, a non-custom element could be created, and then later become a custom element after an appropriate definition is registered. We call this process "upgrading" the element, from a normal element into a custom element.
</p>

<p>
`~custom要素~定義$を登録するのは、
それに関連な要素が初期~時に
— 構文解析器などにより —
作成された後の方が，好ましいこともある。
`昇格$は、
そのような~~用法を可能化して，［
~custom要素の内容を漸進的に増強する
］ことを許容する。
例えば、
次の~HTML文書と `img-viewer^e 用の要素~定義は，
非同期的に読込まれる：
◎
Upgrades enable scenarios where it may be preferable for custom element definitions to be registered after relevant elements have been initially created, such as by the parser. They allow progressive enhancement of the content in the custom element. For example, in the following HTML document the element definition for img-viewer is loaded asynchronously:
</p>

<pre class="lang-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;title&gt;画像~viewerの例&lt;/title&gt;

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

&lt;script src="js/elements/img-viewer.js" async&gt;&lt;/script&gt;
</pre>

<!-- 
Image viewer example
A beautiful tree towering over an empty savannah
 -->
<p>
ここでの `img-viewer^e 要素~用の定義は、［
~markup内の `&lt;img-viewer&gt;^c ~tagの後に置かれた，
`async$a 属性を有する `script$e 要素
］を利用して読込まれる。
~scriptを読込んでいる間、
`img-viewer^e 要素は，［
`span$e に類似な，未定義な要素
］として扱われることになる。
~scriptが読込まれ，それが `img-viewer^e 要素を定義したとき、
~page上の既存の `img-viewer^e 要素は，［
その~custom要素~定義が適用され，昇格される
］ことになる
（それは、
文字列 `Kelvin^l で識別される画像~filterを適用して，
画像の視覚的な外観を増強することが~~想定されている）。
◎
The definition for the img-viewer element here is loaded using a script element marked with the async attribute, placed after the &lt;img-viewer&gt; tag in the markup. While the script is loading, the img-viewer element will be treated as an undefined element, similar to a span. Once the script loads, it will define the img-viewer element, and the existing img-viewer element on the page will be upgraded, applying the custom element's definition (which presumably includes applying an image filter identified by the string "Kelvin", enhancing the image's visual appearance).
</p>

<p class="trans-note">【
`img-viewer^e の名前には~hyphenがあるので、
将来も含めて，~scriptが読込まれる前に特別な意味を持つ要素に解釈される心配はない
（`妥当な~custom要素~名$を見よ）。
】</p>

<hr>

<p>
`昇格$が適用されるのは、
文書~tree内にある（正式には，`接続されて$いる）要素に限られることに注意。
文書に挿入されていない要素は、
昇格されないままになる。
この点について，例で~~説明すると：
◎
Note that upgrades only apply to elements in the document tree. (Formally, elements that are connected.) An element that is not inserted into a document will stay un-upgraded. An example illustrates this point:
</p>

<!-- 
Upgrade edge-cases example
-->
<pre class="lang-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;title&gt;昇格の際どい事例&lt;/title&gt;

&lt;example-element&gt;&lt;/example-element&gt;

&lt;script&gt;
  "use strict";

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

  /* <span class="comment">
要素~定義の前：
どちらも `HTMLElement^I ：
◎
Before the element definition, both are HTMLElement:
</span> */
  console.assert(%文書内 instanceof HTMLElement);
  console.assert(%文書外 instanceof HTMLElement);

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

  /* <span class="comment">
要素~定義の後：
文書~内に在った方の要素は、
この時点で昇格-済み：
◎
After element definition, the in-document element was upgraded:
</span> */
  console.assert(%文書内 instanceof ExampleElement);
  console.assert(!(%文書外 instanceof ExampleElement));

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

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

				</section>
				<section id="exposing-custom-element-states">
<h5 title="Exposing custom element states">4.13.1.7. ~custom要素~状態の公開-法</h5>

<p>
~UAにより供される組込みの要素には、［
利用者-ヤリトリ~その他の要因に依存して，時間~越しに変化し得る ある種の状態
］たちがあり，
`疑似類$を通して~web作者に公開される。
例えば，一部の~form~controlには、
“妥当でない” 状態があり，
`invalid$ps `疑似類$を通して公開される。
◎
Built-in elements provided by user agents have certain states that can change over time depending on user interaction and other factors, and are exposed to web authors through pseudo-classes. For example, some form controls have the "invalid" state, which is exposed through the :invalid pseudo-class.
</p>

<p>
組込みの要素と同様、
`~custom要素$も様々な状態をとり得る
— `~custom要素$の作者は、
これらの状態を組込みの要素と類似な流儀で公開するよう求める。
◎
Like built-in elements, custom elements can have various states to be in too, and custom element authors want to expose these states in a similar fashion as the built-in elements.
</p>

<p>
これは、
`state()$ps 疑似類を介して行われる。
~custom要素の作者は、
`ElementInternals$I の `states$eI ~propを利用して，
そのような~custom状態を追加したり除去できる
— それらは、
`state()$ps 疑似類の引数として公開されるようになる。
◎
This is done via the :state() pseudo-class. A custom element author can use the states property of ElementInternals to add and remove such custom states, which are then exposed as arguments to the :state() pseudo-class.
</p>

<div class="example">
<p>
`state()$ps を利用して，~customな~checkbox要素を~styleする方法を次に示す。
`LabeledCheckbox^I は、
その “~check有無” 状態を内容~属性を介して公開しないと見做す。
◎
The following shows how :state() can be used to style a custom checkbox element. Assume that LabeledCheckbox doesn't expose its "checked" state via a content attribute.
</p>

`custom-element-states-1^xCode
</div>

<div class="example">
<p>
~custom疑似類は、
~shadowな各部でも~targetできる。
上の例の拡張は、
これを示す：
◎
Custom pseudo-classes can even target shadow parts. An extension of the above example shows this:
</p>

`custom-element-states-2^xCode
</div>

				</section>
			</section>
			<section id="custom-element-conformance">
<h4 title="Requirements for custom element constructors and reactions">4.13.2. ~custom要素の構築子と反応に課される要件</h4>

<p>
`~custom要素~構築子$を著作する際には、
作者には，次の適合性~要件が課される：
◎
When authoring custom element constructors, authors are bound by the following conformance requirements:
</p>

<ul>
	<li>
正しい~prototype~chain および `this^jv 値を確立するため、
`super()^c を
— 他のすべての~codeが走る前に，構築子の本体を成す最初の~statementで —
~parameterなしで~callしなければナラナイ。
◎
A parameter-less call to super() must be the first statement in the constructor body, to establish the correct prototype chain and this value before any further code is run.
</li>
	<li>
`return^c ~statementは、
単純な早期 return （ `return^c ／ `return this^c ）でない限り，
構築子の本体に現れてはナラナイ。
◎
A return statement must not appear anywhere inside the constructor body, unless it is a simple early-return (return or return this).
</li>
	<li>
構築子は、［
`document.write()$m ／ `document.open()$m
］~methodを利用してはナラナイ。
◎
The constructor must not use the document.write() or document.open() methods.
</li>
	<li>
当の要素の［
属性／子
］を検分してはナラナイ
— `昇格$がない事例では何も無く、
昇格に依拠することは，要素を利用し難いものにするので。
【？】
◎
The element's attributes and children must not be inspected, as in the non-upgrade case none will be present, and relying on upgrades makes the element less usable.
</li>
	<li>
どの［
属性／子
］であれ，当の要素に持たせてはナラナイ
— それは、［
`createElement()$m ／ `createElementNS()$m
］~methodを利用する消費者の期待に違反するので。
◎
The element must not gain any attributes or children, as this violates the expectations of consumers who use the createElement or createElementNS methods.
</li>
	<li>
一般に、
アリな限り，作業は
— とりわけ，資源の~fetchingや具現化を孕むものは —
`connectedCallback^c へ先送りされるべきである。
しかしながら， `connectedCallback^c は複数回~callされ得ることに注意
— 初期化を行うような~~真に一度限りの作業は、
重ねて走らないよう，防護する必要がある。
◎
In general, work should be deferred to connectedCallback as much as possible—especially work involving fetching resources or rendering. However, note that connectedCallback can be called more than once, so any initialization work that is truly one-time will need a guard to prevent it from running twice.
</li>
	<li>
一般に，構築子は、［
初期~状態や既定の値，あるいは~event~listener，場合によっては`~shadow根$
］を設定しておくために利用されるべきである。
◎
In general, the constructor should be used to set up initial state and default values, and to set up event listeners and possibly a shadow root.
</li>
</ul>

<p>
これらの要件のうちいくつかは、
`要素を作成する$間に［
直接的／間接的
］に検査される。
要件に従わない場合、
~custom要素は，構文解析器や~DOM~APIにより~instance化できなくなる。
このことは、
構築子から起動される小taskの内側で行われる作業にも該当する
— `小task~checkpoint$が生じ得るのは、
構築の直後からなので。
◎
Several of these requirements are checked during element creation, either directly or indirectly, and failing to follow them will result in a custom element that cannot be instantiated by the parser or DOM APIs. This is true even if the work is done inside a constructor-initiated microtask, as a microtask checkpoint can occur immediately after construction.
</p>

<p>
`~custom要素~反応$を著作するときには、
作者は~node~treeを操作するのを避けるベキである
— それは、
予期されない結果へ至らせ得るので。
◎
When authoring custom element reactions, authors should avoid manipulating the node tree as this can lead to unexpected results.
</p>

<div class="example">
<p>
要素の `connectedCallback^c は，要素が切断される前に~queueされ得るが、［
~callback~queueがまだ処理されているため，もはや接続されていない要素
］用の `connectedCallback^c になる例：
◎
An element's connectedCallback can be queued before the element is disconnected, but as the callback queue is still processed, it results in a connectedCallback for an element that is no longer connected:
</p>

<pre class="lang-js">
class CParent extends HTMLElement {
  connectedCallback() {
    this.firstChild.remove();
  }
}
customElements.define("c-parent", CParent);

class CChild extends HTMLElement {
  connectedCallback() {
    console.log("CChild connectedCallback: isConnected =", this.isConnected);
  }
}
customElements.define("c-child", CChild);

const %parent = new CParent(),
      %child = new CChild();
parent.append(%child);
document.body.append(%parent);

// Logs:
// CChild connectedCallback: isConnected = false
</pre>
</div>

				<section id="preserving-custom-element-state-when-moved">
<h5 title="Preserving custom element state when moved">4.13.2.1 ~custom要素が移動される際の状態の保全-法</h5>

◎非規範的

<p>
~DOM~treeを操作しているとき、
要素は，接続されている間に~tree内で`移動-$され得る。
これは，~custom要素にも適用される。
既定では、
当の要素に対し［
`disconnectedCallback^c, `connectedCallback^c
］が順に~callされる。
これは、
`moveBefore()＠~DOM4#dom-parentnode-movebefore$c ~methodの登場以前における既存の~custom要素との互換性を保守するために行われる。
このことは、
~custom要素は，既定では
— 除去されてから挿入し直されたかのように —
自身の状態を設定し直すことを意味する。
`上の例＠#custom-elements-autonomous-drawbacks-example$においては、
その影響iにより［
当の変異~観測器（ `_observer^c ）は切断されてから接続し直され，
~tab~indexは設定し直される
］ことになる。
◎
When manipulating the DOM tree, an element can be moved in the tree while connected. This applies to custom elements as well. By default, the "disconnectedCallback" and "connectedCallback" would be called on the element, one after the other. This is done to maintain compatibility with existing custom elements that predate the moveBefore() method. This means that by default, custom elements reset their state as if they were removed and re-inserted. In the example above, the impact would be that the observer would be disconnected and re-connected, and the tab index would be reset.
</p>

<p>
作者は、
`connectedMoveCallback^c を実装することで，［
`移動-$している間も状態を保全する挙動
］を~~任意で選べる。
この~callbackが存在するときは、
それが空であっても，
`disconnectedCallback^c と `connectedCallback^c を~callする既定の挙動に取って代わるようになる。
`connectedMoveCallback^c は、
要素の先祖に依存する~logicを実行する場としても適切になり得る。
例えば：
◎
To opt in to a state-preserving behavior while moving, the author can implement a "connectedMoveCallback". The existence of this callback, even if empty, would supercede the default behavior of calling "disconnectedCallback" and "connectedCallback". "connectedMoveCallback" can also be an appropriate place to execute logic that depends on the element's ancestors. For example:
</p>

<pre class="lang-js">
class TacoButton extends HTMLElement {
  static observedAttributes = ["disabled"];

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._internals.role = "button";

    this._observer = new MutationObserver(() =&gt; {
      this._internals.ariaLabel = this.textContent;
    });
  }

  _notifyMain() {
    if (this.parentElement.tagName === "MAIN") {
	  /* <span class="comment">
先祖に依存する~logicを実行する
◎
Execute logic that depends on ancestors.
</span> */
    }
  }

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

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

    this._notifyMain();
  }

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

  /* <span class="comment">
次の関数を実装することで、
この要素が~DOMの内側で移動されたときは，切断されることなく［
~tab~indexが設定し直される／
変異~観測器（ `_observer^c ）が登録し直される
］ことを避けるようになる。
◎
Implementing this function would avoid resetting the tab index or re-registering the mutation observer when this element is moved inside the DOM without being disconnected.
</span> */
  connectedMoveCallback() {
    /* <span class="comment">
状態を保全しながら移動する間も，親は変化し得る／を変更できる
◎
The parent can change during a state-preserving move.
</span> */
    this._notifyMain();
  }
}
</pre>

				</section>
			</section>
			<section id="custom-elements-core-concepts">
<h4 title="Core concepts">4.13.3. 中核~概念</h4>

<p>
`~custom要素@
は、
`~custom$elである要素である†。
これは，非正式には、［
その構築子と~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.
</p>

<p class="trans-note">【†
昇格される前は、
まだ “~customでない”
】</p>

<p>
次に挙げる 2 つの別個な種別を成す`~custom要素$を定義できる：
◎
Two distinct types of custom elements can be defined:
</p>
<ul>
	<li>
`自律的~custom要素@
（ `autonomous custom element^en ）
⇒
`extends$mb ~optionを伴わずに定義されるもの。
この種別を成す~custom要素の`局所~名$elは、
それに定義された`名前$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.
</li>
	<li>
`~custom化された組込みの要素@
（ `customized built-in element^en ）
⇒
`extends$mb ~optionを伴って定義されるもの。
この種別を成す~custom要素の`局所~名$elは、
当の~optionに
【当の~custom要素が拡張する要素の名前として】
渡された値に等しくなる。
それに定義された`名前$cDは、
`is@a
属性の値として利用される
— したがって、
`妥当な~custom要素~名$でなければナラナイ。
◎
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.
</li>
</ul>

<p>
`~custom要素$が`作成され＠~DOM4#concept-create-element$た後に `is$a 属性の値を変更しても，［
`~is0値$elとして要素に保存-済みな，要素の挙動
］は変化しない。
◎
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.
</p>

<p>
`自律的~custom要素$の`要素~定義＠~HTMLdom#element-definitions$は、
次で与えられる：
◎
Autonomous custom elements have the following element definition:
</p>

<dl class="element-def">
	<dt>`分類$：</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>
	<dd>
`~formに所有され得る~custom要素$に限り
⇒
`~formに所有され得る要素$のうち［
`~listされる$／`~label可能$／`提出-可能$／`再設定-可能$
］なもの
◎
For form-associated custom elements: Listed, labelable, submittable, and resettable form-associated element.
</dd>

	<dt>`この要素を利用できる文脈$：</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$：</dt>
	<dd>
`透過的$。
◎
Transparent.
</dd>

	<dt>`内容~属性$：</dt>
	<dd>
`大域~属性$
— ただし、 `is$a 属性は除く。
◎
Global attributes, except the is attribute
</dd>
	<dd>
`form$a ：`~formに所有され得る~custom要素$用
— 要素を `form$e 要素に所有させる
◎
form, for form-associated custom elements — Associates the element with a form element
</dd>
	<dd>
`disabled$a ：`~formに所有され得る~custom要素$用
— この~form~controlを不能化するかどうか
◎
disabled, for form-associated custom elements — Whether the form control is disabled
</dd>
	<dd>
`readonly$a ：`~formに所有され得る~custom要素$用
— `willValidate$eI, および当の~custom要素の［
作者により追加される挙動
］に影響する。
◎
readonly, for form-associated custom elements — Affects willValidate, plus any behavior added by the custom element author
</dd>
	<dd>
`name$a ：`~formに所有され得る~custom要素$用
— ［
`~form提出$ ／ `form.elements＠~HEforms#dom-form-elements$c ~API
］用に利用する要素の名前
◎
name, for form-associated custom elements — Name of the element to use for form submission and in the form.elements API
</dd>
	<dd>
他の，どの名前空間にも属さない任意の属性（注釈文を見よ）。
◎
Any other attribute that has no namespace (see prose).
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`~formに所有され得る~custom要素$の場合
⇒
`作者~向け＠~HTMLARIA#el-form-associated-custom-element$／
`実装者~向け＠~HTMLAAM#el-form-associated-custom-element$
◎
For form-associated custom elements: for authors; for implementers.
</dd>
	<dd>
他の場合
⇒
`作者~向け＠~HTMLARIA#el-autonomous-custom-element$／
`実装者~向け＠~HTMLAAM#el-autonomous-custom-element$
◎
Otherwise: for authors; for implementers.
</dd>

	<dt>`~DOM~interface$：</dt>
	<dd>
要素の作者が給する（ `HTMLElement$I を継承する）。
◎
Supplied by the element's author (inherits from HTMLElement)
</dd>
</dl>

<p>
`自律的~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.
</p>

<div class="p">
<p>
作者は、
`自律的~custom要素$に［
その機能に関連なものと決定した任意の属性
］を指定できる
— 当の属性が ~AND↓ を満たす限り：
</p>
<ul>
	<li>
どの名前空間にも属さない
</li>
	<li>
その名前は、
次を満たす
⇒
［
`~XML互換$である
］~AND［
`~ASCII英大文字$を包含しない
］
</li>
</ul>
◎
Any namespace-less attribute that is relevant to the element's functioning, as determined by the element's author, may be specified on an autonomous custom element, so long as the attribute name is XML-compatible and contains no ASCII upper alphas.＼
</div>

<p>
ただし，例外として、
`is$a 属性は，`自律的~custom要素$に指定してはナラナイ
（また、指定しても効果はない）。
◎
The exception is the is attribute, which must not be specified on an autonomous custom element (and which will have no effect if it is).
</p>

<p>
`~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.
</p>

<hr>

<p>
次を満たす`自律的~custom要素$は、
`~formに所有され得る~custom要素@
と呼ばれる
⇒
それに結付けられた`~custom要素~定義$の`~formに所有され得るか$cD ~EQ ~T
◎
An autonomous custom element is called a form-associated custom element if the element is associated with a custom element definition whose form-associated field is set to true.
</p>

<p>
`~formに所有され得る~custom要素$ %要素 の：
◎
↓</p>

<ul>
	<li>
`name$a 属性は、
%要素 の名前を表現する。
◎
The name attribute represents the form-associated custom element's name.＼
</li>
	<li>
`disabled$a 属性は、
%要素 をヤリトリありでなくし，`提出~値$cFも提出させなくするために利用される。
◎
The disabled attribute is used to make the form-associated custom element non-interactive and to prevent its submission value from being submitted.＼
</li>
	<li>
`form$a 属性は、
%要素 の`~form所有者$を明示的に指定するために利用される。
◎
The form attribute is used to explicitly associate the form-associated custom element with its form owner.
</li>
	<li>
`readonly@a
属性は、
【`真偽-属性$であり，在るならば】
%要素 は`拘束~検証の対象外$になるものと指定する。
~UAは［
この属性~用には、
他の挙動は何ら供さない
］が、
~custom要素の作者は［
この属性が在るときには、
アリな所では，当の~controlを編集-不能にする
］ベキである
— 組込みの~form~controlの `readonly＠~HEinput#attr-input-readonly$a 属性~用の挙動に類似な，何らかの適切な流儀で。
◎
The readonly attribute of form-associated custom elements specifies that the element is barred from constraint validation. User agents don't provide any other behavior for the attribute, but custom element authors should, where possible, use its presence to make their control non-editable in some appropriate fashion, similar to the behavior for the readonly attribute on built-in form controls.
</li>
</ul>

<p>
<strong>拘束~検証</strong>
⇒
`~formに所有され得る~custom要素$は、
次が満たされる間は`拘束~検証の対象外$になる
⇒
`readonly$a 属性を有する
◎
Constraint validation: If the readonly attribute is specified on a form-associated custom element, the element is barred from constraint validation.
</p>

<div class="algo">
`~formに所有され得る~custom要素$ %要素 用の`再設定~algo$は
⇒
`~custom要素~callback反応を~enqueueする$( %要素, `formResetCallback^l, « » )
◎
The reset algorithm for form-associated custom elements is to enqueue a custom element callback reaction with the element, callback name "formResetCallback", and « ».
</div>

<hr>

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

<ul>
	<li>
<p>
`PotentialCustomElementName$P 生成規則に合致しなければナラナイ：
◎
name must match the PotentialCustomElementName production:
</p>

<dl>
	<dt><code class="bnf">`PotentialCustomElementName@P ::=</code></dt>
	<dd>
<code class="bnf">[a-z] (`PCENChar$P)* '-' (`PCENChar$P)*</code>
</dd>

	<dt><code class="bnf">`PCENChar@P ::=</code></dt>
	<dd><code class="bnf">
"-" | "." | [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]
</code></dd>
</dl>

<p>
この生成規則は、
`XML$r 仕様の `EBNF 記法＠~TR/xml/#sec-notation$を利用している。
◎
This uses the EBNF notation from the XML specification. [XML]
</p>
	</li>
	<li>
<p>
次に挙げるものに一致してはナラナイ：
◎
name must not be any of the following:
</p>

<ul ><li>`annotation-xml^l
</li><li>`color-profile^l
</li><li>`font-face^l
</li><li>`font-face-src^l
</li><li>`font-face-uri^l
</li><li>`font-face-format^l
</li><li>`font-face-name^l
</li><li>`missing-glyph^l
</li></ul>

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

<div class="note">
<p>注記：
これらの要件は、
次に挙げる，`妥当な~custom要素~名$の目標を確保するためにある：
◎
These requirements ensure a number of goals for valid custom element names:
</p>

<ul>
	<li>
`~ASCII英小文字$から始まる
— ~HTML構文解析器が［
それを~textではなく~tagとして扱う
］ことを確保するため。
◎
They start with an ASCII lower alpha, ensuring that the HTML parser will treat them as tags instead of as text.
</li>
	<li>
`~ASCII英大文字$を包含しない
— ~UAが［
~HTML要素を常に~ASCII大小無視で扱える
］ことを確保するため。
◎
They do not contain any ASCII upper alphas, ensuring that the user agent can always treat HTML elements ASCII-case-insensitively.
</li>
	<li>
~hyphenを包含する
— 名前空間~付けに利用するために加え、
前方-互換性も確保するため
（将来において、［
~hyphenを包含する局所~名
］を伴う要素が［
~HTML／~SVG／~MathML
］に追加されることはないので）。
◎
They contain a hyphen, used for namespacing and to ensure forward compatibility (since no elements will be added to HTML, SVG, or MathML with hyphen-containing local names in the future).
</li>
	<li>
［
`createElement()$m ／ `createElementNS()$m
］でも，常に作成できるようにするため
— これらには、
構文解析器によるものを超える制約がある。
◎
They can always be created with createElement() and createElementNS(), which have restrictions that go beyond the parser's.
</li>
</ul>

<p>
これらの制約は別として、
可能な限り柔軟にするため，多様な名前が許容される
— `&lt;math-α&gt;^c や `&lt;emotion-😍&gt;^c
の様な利用事例のために。
◎
Apart from these restrictions, a large variety of names is allowed, to give maximum flexibility for use cases like &lt;math-α&gt; or &lt;emotion-😍&gt;.
</p>
</div>

<p>
各
`~custom要素~定義@
は、
`~custom要素$を述べる
— それは、
次に挙げるものからなる：
◎
A custom element definition describes a custom element and consists of:
</p>

<dl class="def-list">
	<dt>
`名前@cD
◎
A name
</dt>
	<dd>
`妥当な~custom要素~名$
◎
A valid custom element name
</dd>

	<dt>
`局所~名@cD
◎
A local name
</dt>
	<dd>
局所~名
◎
A local name
</dd>

	<dt>
`構築子@cD
◎
A constructor
</dt>
	<dd>
~IDL `CustomElementConstructor$I ~callback関数~型の値
◎
A Web IDL CustomElementConstructor callback function type value＼
</dd>
	<dd>
`~custom要素~構築子$を包装する。
◎
wrapping the custom element constructor
</dd>

	<dt>
`観測される属性~群@cD
◎
A list of observed attributes
</dt>
	<dd>
`sequence&lt;DOMString&gt;^I 型の値
◎
A sequence&lt;DOMString&gt;
</dd>
	<dd class="trans-note">【
観測-対象にする内容~属性たちの名前を~~保持する。
】</dd>

	<dt>
`~lifecycle~callback~map@cD
◎
A collection of lifecycle callbacks
</dt>
	<dd>
`~map$
— 次に挙げる~keyを伴う
⇒＃
`connectedCallback^l,
`disconnectedCallback^l,
`adoptedCallback^l,
`connectedMoveCallback^l,
`attributeChangedCallback^l,
`formAssociatedCallback^l,
`formDisabledCallback^l,
`formResetCallback^l,
`formStateRestoreCallback^l
◎
A map, whose keys are the strings "connectedCallback", "disconnectedCallback", "adoptedCallback", "connectedMoveCallback", "attributeChangedCallback", "formAssociatedCallback", "formDisabledCallback", "formResetCallback", and "formStateRestoreCallback".＼
</dd>
	<dd>
どの~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.
</dd>
	<dd class="trans-note">【
これらの~callbackが いつ~callされるかは、
`§ ~custom要素~反応＠#custom-element-reactions$
を見よ。
】</dd>

	<dt>
`構築~stack@cD
◎
A construction stack
</dt>
	<dd>
~list
— 初期~時は空とする。
◎
A list, initially empty,＼
</dd>
	<dd>
この~listは、［
`要素を昇格する$~algo,
`~HTML要素~構築子$
］により操作される。
◎
that is manipulated by the upgrade an element algorithm and the HTML element constructors.＼
</dd>
	<dd>
この~listを成す各~entryは、
次のいずれかになる
⇒＃
ある要素,
`すでに構築-済みを表す~marker@i
◎
Each entry in the list will be either an element or an already constructed marker.
</dd>

	<dt>
`~formに所有され得るか@cD
◎
A form-associated＼
</dt>
	<dd>
真偽値
◎
boolean
</dd>
	<dd>
~T ならば、
~UAは，この`~custom要素~定義$に結付けられる要素を`~formに所有され得る~custom要素$として扱う。
◎
If this is true, user agent treats elements associated to this custom element definition as form-associated custom elements.
</dd>

	<dt>
`内部特能を不能化するか@cD
◎
A disable internals＼
</dt>
	<dd>
真偽値
◎
boolean
</dd>
	<dd>
`attachInternals()$m を制御する。
◎
Controls attachInternals().
</dd>

	<dt>
`~shadowを不能化するか@cD
◎
A disable shadow＼
</dt>
	<dd>
真偽値
◎
boolean
</dd>
	<dd>
`attachShadow()$m を制御する。
◎
Controls attachShadow().
</dd>
</dl>

<div class="algo">
<p>
`~custom要素~定義を検索する@
~algoは、
所与の
⇒＃
［~NULL／ `CustomElementRegistry$I ~obj］%~registry,
［~NULL／文字列］ %名前空間,
文字列 %局所~名,
［~NULL／文字列］ %is
◎終
に対し，［
~NULL／`~custom要素~定義$
］を返す：
◎
To look up a custom element definition, given null or a CustomElementRegistry object registry, string-or-null namespace, string localName, and string-or-null is, perform the following steps. They will return either a custom element definition or null:
</p>
<ol>
	<li>
~IF［
%~registry ~EQ ~NULL
］
⇒
~RET ~NULL
◎
If registry is null, then return null.
</li>
	<li>
~IF［
%名前空間 ~NEQ `~HTML名前空間$
］
⇒
~RET ~NULL
◎
If namespace is not the HTML namespace, then return null.
</li>
	<li>
%~registry の`~custom要素~定義~集合$cRを成す
~EACH( %定義 )
に対し
⇒
~IF［
%定義 の`名前$cD ~EQ %局所~名
］~AND［
%定義 の`局所~名$cD ~EQ %局所~名
］
⇒
~RET %定義
◎
If registry's custom element definition set contains an item with name and local name both equal to localName, then return that item.
</li>
	<li>
%~registry の`~custom要素~定義~集合$cRを成す
~EACH( %定義 )
に対し
⇒
~IF［
%定義 の`名前$cD ~EQ %is
］~AND［
%定義 の`局所~名$cD ~EQ %局所~名
］
⇒
~RET %定義
◎
If registry's custom element definition set contains an item with name equal to is and local name equal to localName, then return that item.
</li>
	<li>
~RET ~NULL
◎
Return null.
</li>
</ol>
</div>

			</section>
			<section id="custom-elements-api">
<h4 title="The CustomElementRegistry interface">4.13.4. `CustomElementRegistry^I ~interface</h4>

<p>
各`生成元が類似な~window~agent$には、
`作動中な~custom要素~構築子~map@
が結付けられる
— それは、
構築子たちから `CustomElementRegistry$I ~objたちへの`~map$である。
◎
Each similar-origin window agent has an associated active custom element constructor map, which is a map of constructors to CustomElementRegistry objects.
</p>

<div class="algo">
<p>
`Window$I の
`customElements@m
取得子~手続きは：
</p>
<ol>
	<li>
%~registry ~LET コレに`結付けられた文書$の`~custom要素~registry$doc
◎
↓</li>
	<li>
<p>
~Assert：
%~registry は `CustomElementRegistry$I ~objである。
◎
Assert: this's associated Document's custom element registry is a CustomElementRegistry object.
</p>

<p class="note">注記：
`Window$I に`結付けられた文書$は、
常に，新たな `CustomElementRegistry$I ~objを伴って作成される。
◎
A Window's associated Document is always created with a new CustomElementRegistry object.
</p>
	</li>
	<li>
~RET %~registry
◎
Return this's associated Document's custom element registry.
</li>
</ol>
</div>

<pre class="idl">
[Exposed=Window]
interface `CustomElementRegistry@I {
  `constructor＠#dom-customelementregistry$();

[`CEReactions$] undefined `define$m(
       DOMString %name,
       `CustomElementConstructor$I %constructor,
       optional `ElementDefinitionOptions$I %options = {}
  );
  (`CustomElementConstructor$I or undefined) `get$m(DOMString %name);
  DOMString? `getName$m(`CustomElementConstructor$I %constructor);
  `Promise$&lt;`CustomElementConstructor$I&gt; `whenDefined$m(DOMString %name);
  [`CEReactions$] undefined `upgrade$m(`Node$I %root);
  undefined `initialize$m(`Node$I %root);
};

callback `CustomElementConstructor@I = `HTMLElement$I ();

dictionary `ElementDefinitionOptions@I {
  DOMString `extends@mb;
};
</pre>

<p>
各 `CustomElementRegistry$I は、
次に挙げるものを有する：
◎
↓</p>
<ul>
	<li>
`視野~付きか@cR
⇒
真偽値
— 初期~時は ~F とする。
◎
Every CustomElementRegistry has an is scoped, a boolean, initially false.
</li>
	<li>
`視野~付き文書~集合@cR
⇒
`文書$たちが成す`集合$
— 初期~時は`空$とする。
◎
Every CustomElementRegistry has a scoped document set, a set of Document objects, initially « ».
</li>
	<li>
<p>
`~custom要素~定義~集合@cR
⇒
`~custom要素~定義$たちが成す`集合$
— 初期~時は`空$とする。
この集合を成す~itemは、［
`名前$cD／`局所~名$cD／`構築子$cD
］を利用して検索される。
</p>

<p class="trans-note">【
この集合を成す複数個の~itemが［
同じ`名前$cD／同じ`構築子$cD
］を共有することはない
— `define()$m ~methodが，そのことを保証する
（`~custom要素~定義$が作成される機会は、
この~methodの中に限られる）。
したがって、
この集合~内を所与の［
名前／構築子
］で検索する際に，
この集合を成す~itemたちの順序が有意になることもない。
】【
この集合を成す~itemどうしの同等性が何に基づくか定義されていないが、
`名前$cDまたは`構築子$cD（どちらでも結果は同じ）に基づくであろう。
】【
この集合から~itemを除去する
（既存の`~custom要素~定義$を “無かったこと” にする）
仕方は無い
（`論点＠https://github.com/WICG/webcomponents/issues/754$）。
】</p>

◎
Every CustomElementRegistry has a custom element definition set, a set of custom element definitions, initially « ». Lookup of items in this set uses their name, local name, or constructor.
</li>
	<li>
`要素~定義は走っているか@cR
⇒
真偽値
— 初期~時は ~F とする。
`要素~定義$が再入的に呼出されるのを防止するためにある。
◎
Every CustomElementRegistry also has an element definition is running boolean which is used to prevent reentrant invocations of element definition. It is initially false.
</li>
	<li>
<p>
`定義-済み時~promise~map@cR
⇒
`妥当な~custom要素~名$から~promiseへの`~map$
【— 初期~時は空とする】。
`whenDefined()$m ~methodを実装するために利用される。
◎
Every CustomElementRegistry also has a when-defined promise map, a map of valid custom element names to promises. It is used to implement the whenDefined() method.
</p>

<p class="trans-note">【
これらの~promiseは、
`定義-済み$elになったとき`解決される＠~WEBIDLjs#resolve$。
】</p>
	</li>
</ul>

<div class="algo">
`~custom要素~registryを検索する@
~algoは、
所与の
( `~node$ %~node )
に対し
⇒
~RET %~node に応じて
⇒＃
`要素$であるならば %~node の`~custom要素~registry$el／
`~shadow根$であるならば %~node の`~custom要素~registry$sR／
`文書$であるならば %~node の`~custom要素~registry$doc／
~ELSE_ ~NULL
◎
To look up a custom element registry, given a Node object node:
• If node is an Element object, then return node's custom element registry.
• If node is a ShadowRoot object, then return node's custom element registry.
• If node is a Document object, then return node's custom element registry.
• Return null.
</div>

<dl class="domintro">
	<dt>%registry = %window.`customElements$m</dt>
	<dd>
%window に`結付けられた文書$【！the global's associated Document】の `CustomElementRegistry$I ~objを返す。
◎
Returns the global's associated Document's CustomElementRegistry object.
</dd>

	<dt>%registry = `new CustomElementRegistry()$m</dt>
	<dd>
新たな `CustomElementRegistry$I ~objを
— 視野~付き用法~用に —
構築する。
◎
Constructs a new CustomElementRegistry object, for scoped usage.
</dd>

	<dt>%registry.`define(name, constructor)$m</dt>
	<dd>
`名前$cD %name を伴う新たな`~custom要素$を`自律的~custom要素$として定義する。
%constructor が その構築子を与える。
%name は その構築子に対応付けられる。
◎
Defines a new custom element, mapping the given name to the given constructor as an autonomous custom element.
</dd>

	<dt>%registry.`define$m(%name, %constructor, { extends: %baseLocalName })</dt>
	<dd>
`名前$cD %name を伴う新たな`~custom要素$を`~custom化された組込みの要素$として定義する。
%constructor が その構築子を与える。
%name は その構築子に対応付けられる。
拡張される`要素~型$は、
%baseLocalName 値で識別される。
◎
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.＼
</dd>
	<dd>
<p>
次に挙げる場合、
`NotSupportedError$E 例外が投出される：
◎
A "NotSupportedError" DOMException will be thrown upon＼
</p>
		<ul>
			<li>
［
`~custom要素$／未知な要素
］を拡張するよう試行した
◎
trying to extend a custom element or an unknown element,＼
</li>
			<li>
%registry は，大域的な `CustomElementRegistry$I ~objでないとき
【その`視野~付きか$cR ~EQ ~T のとき】
◎
or when registry is not a global CustomElementRegistry object.
</li>
		</ul>
	</dd>

	<dt>%registry.`get(name)$m</dt>
	<dd>
所与の`名前$cD（ %name ）用に定義された`~custom要素~構築子$を検索取得する。
`名前$cDとして %name を伴う`~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.
</dd>

	<dt>%registry.`getName(constructor)$m</dt>
	<dd>
所与の`構築子$cD（ %constructor ）用に定義された`~custom要素$に与えられた名前を検索取得する。
`構築子$cDとして %constructor を伴う`~custom要素~定義$は無い場合、
~NULL を返す。
◎
Retrieves the given name for a custom element defined for the given constructor. Returns null if there is no custom element definition with the given constructor.
</dd>

	<dt>%registry.`whenDefined(name)$m</dt>
	<dd>
~promiseを返す
— それは、
所与の`名前$cD（ %name ）を伴う`~custom要素$ %要素 が`定義-済み$elになったとき，
%要素 の構築子で充足されることになる
（すでに定義-済みならば、
即時に充足されることになる）。
◎
Returns a promise that will be fulfilled with the custom element's constructor 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.)＼
</dd>
	<dd>
%name が`妥当な~custom要素~名$でない場合、
`却下される~promise$( `SyntaxError$E 例外 )
を返す。
◎
Returns a promise rejected with a "SyntaxError" DOMException if not given a valid custom element name.
</dd>

	<dt>%registry.`upgrade(root)$m</dt>
	<dd>
%root の`~shadowも含めた広義-子孫$である要素すべてを
— `接続されて$いなくても —
`昇格するよう試行する＠#concept-try-upgrade$。
◎
Tries to upgrade all shadow-including inclusive descendant elements of root, even if they are not connected.
</dd>

	<dt>%registry.`initialize(root)$m</dt>
	<dd>
%root の各`広義-子孫$のうち［
その`~custom要素~registry$el ~EQ ~NULL
］を満たすものに対し，それらの`~custom要素~registry$elが %registry 【！this CustomElementRegistry object】に更新されるようにする。
◎
Each inclusive descendant of root with a null registry will have it updated to this CustomElementRegistry object.
</dd>
</dl>

<div class="algo">
`new CustomElementRegistry()@m
構築子~手続きは
⇒
コレの`視野~付きか$cR ~SET ~T
◎
The new CustomElementRegistry() constructor steps are to set this's is scoped to true.
</div>

<p>
`要素~定義@
は、
`~custom要素~定義$を `CustomElementRegistry$I に追加する処理nである。
これは、
`define()$m ~methodにより成遂げられる。
◎
Element definition is a process of adding a custom element definition to the CustomElementRegistry. This is accomplished by the define() method.＼
</p>

<div class="algo">
<p>
`define(name, constructor, options)@m
~method手続きは：
◎
The define(name, constructor, options) method steps are:
</p>
<ol>
	<li>
~IF［
`IsConstructor$jA( %constructor ) ~EQ ~F
］
⇒
~THROW `TypeError$E
◎
If IsConstructor(constructor) is false, then throw a TypeError.
</li>
	<li>
~IF［
%name は`妥当な~custom要素~名$でない
］
⇒
~THROW `SyntaxError$E
◎
If name is not a valid custom element name, then throw a "SyntaxError" DOMException.
</li>
	<li>
コレの`~custom要素~定義~集合$cRを成す
~EACH( %定義 )
に対し
⇒
~IF［
%定義 の`名前$cD ~EQ %name
］
⇒
~THROW `NotSupportedError$E
◎
If this's custom element definition set contains an item with name name, then throw a "NotSupportedError" DOMException.
</li>
	<li>
コレの`~custom要素~定義~集合$cRを成す
~EACH( %定義 )
に対し
⇒
~IF［
%定義 の`構築子$cD ~EQ %constructor
］
⇒
~THROW `NotSupportedError$E
◎
If this's custom element definition set contains an item with constructor constructor, then throw a "NotSupportedError" DOMException.
</li>
	<li>
%局所~名 ~LET %name
◎
Let localName be name.
</li>
	<li>
%extends ~LET %options[ "`extends$mb" ]
◎
Let extends be options["extends"] if it exists; otherwise null.
</li>
	<li>
<p>
~IF［
%extends ~NEQ ε
］：
◎
If extends is not null:
</p>
		<ol>
			<li>
<p>
~IF［
~OR↓
］…
</p>
				<ul>
					<li>
コレの`視野~付きか$cR ~EQ ~T
</li>
					<li>
%extends は`妥当な~custom要素~名$である
</li>
					<li>
( %extends, `~HTML名前空間$ )
用の`要素~interface$ ~EQ `HTMLUnknownElement$I
（例： %extends は、
この仕様~内の要素~定義を指示していない）
</li>
				</ul>
<p>
…ならば
⇒
~THROW `NotSupportedError$E
</p>
◎
• If this's is scoped is true, then throw a "NotSupportedError" DOMException.
• If extends is a valid custom element name, then throw a "NotSupportedError" DOMException.
• 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.
</li>
			<li>
%局所~名 ~SET %extends
◎
Set localName to extends.
</li>
		</ol>
	</li>
	<li>
~IF［
コレの`要素~定義は走っているか$cR ~EQ ~T
］
⇒
~THROW `NotSupportedError$E
◎
If this's element definition is running is true, then throw a "NotSupportedError" DOMException.
</li>
	<li>
コレの`要素~定義は走っているか$cR ~SET ~T
◎
Set this's element definition is running to true.
</li>
	<li>
%~formに所有され得るか ~LET ~F
◎
Let formAssociated be false.
</li>
	<li>
%内部特能を不能化するか ~LET ~F
◎
Let disableInternals be false.
</li>
	<li>
%~shadowを不能化するか ~LET ~F
◎
Let disableShadow be false.
</li>
	<li>
%観測される属性~群 ~LET 空な `sequence&lt;DOMString&gt;^c
◎
Let observedAttributes be an empty sequence&lt;DOMString&gt;.
</li>
	<li>
<p>
%~lifecycle~callback群 ~LET 新たな`~map$
</p>

<p class="trans-note">【
これは，原文では次の段の中の入子な~block内で宣言されているが、
その後の段でも利用されるので，ここで宣言することにする。
】</p>
◎
↓</li>
	<li>
<p>
この段の中で例外が投出されたときは、
~catchして，下に与える手続き `(A)^i を走らす：
◎
Run the following steps while catching any exceptions:
</p>
		<ol>
			<li>
%~prototype ~LET
~ABRUPT `Get$jA( %constructor, `prototype^l )
◎
Let prototype be ? Get(constructor, "prototype").
</li>
			<li>
~IF［
%~prototype は `Object$jt でない
］
⇒
~THROW `TypeError$E
◎
If prototype is not an Object, then throw a TypeError exception.
</li>
			<li>
<p>
«
`connectedCallback^l,
`disconnectedCallback^l,
`adoptedCallback^l,
`connectedMoveCallback^l,
`attributeChangedCallback^l
»
を成す
~EACH( %~callback名 )
に対し：
◎
↑ Let lifecycleCallbacks be the ordered map＼
«[ "connectedCallback" → null, "disconnectedCallback" → null, "adoptedCallback" → null, "connectedMoveCallback" → null, "attributeChangedCallback" → null ]».
◎
For each callbackName of the keys of lifecycleCallbacks:
</p>
				<ol>
					<li>
%~lifecycle~callback群[ %~callback名 ] ~SET ~NULL
◎
↑</li>
					<li>
%~callback値 ~LET
~ABRUPT `Get$jA( %~prototype, %~callback名 )
◎
Let callbackValue be ? Get(prototype, callbackName).
</li>
					<li>
~IF［
%~callback値 ~NEQ `undefined^jv
］
⇒
%~lifecycle~callback群[ %~callback名 ] ~SET `~IDL値に変換する$( %~callback値, `Function$I )
◎
If callbackValue is not undefined, then set lifecycleCallbacks[callbackName] to the result of converting callbackValue to the Web IDL Function callback type.
</li>
				</ol>
			</li>
			<li>
<p>
~IF［
%~lifecycle~callback群[ `attributeChangedCallback^l ] ~NEQ ~NULL
］：
◎
If lifecycleCallbacks["attributeChangedCallback"] is not null:
</p>
				<ol>
					<li>
%観測される属性~群の可反復 ~LET
~ABRUPT `Get$jA( %constructor, `observedAttributes^l )
◎
Let observedAttributesIterable be ? Get(constructor, "observedAttributes").
</li>
					<li>
~IF［
%観測される属性~群の可反復 ~NEQ `undefined^jv
］
⇒
%観測される属性~群 ~SET `~IDL値に変換する$( %観測される属性~群の可反復, `sequence&lt;DOMString&gt;^I )
（例外投出あり）
◎
If observedAttributesIterable is not undefined, then set observedAttributes to the result of converting observedAttributesIterable to a sequence&lt;DOMString&gt;. Rethrow any exceptions from the conversion.
</li>
				</ol>
			</li>
			<li>
%不能化された特能~群 ~LET 空な `sequence&lt;DOMString&gt;^c
◎
Let disabledFeatures be an empty sequence&lt;DOMString&gt;.
</li>
			<li>
%不能化された特能~群の可反復 ~LET
~ABRUPT `Get$jA( %constructor, `disabledFeatures^l )
◎
Let disabledFeaturesIterable be ? Get(constructor, "disabledFeatures").
</li>
			<li>
~IF［
%不能化された特能~群の可反復 ~NEQ `undefined^jv
］
⇒
%不能化された特能~群 ~SET `~IDL値に変換する$( %不能化された特能~群の可反復, `sequence&lt;DOMString&gt;^I )
（例外投出あり）
◎
If disabledFeaturesIterable is not undefined, then set disabledFeatures to the result of converting disabledFeaturesIterable to a sequence&lt;DOMString&gt;. Rethrow any exceptions from the conversion.
</li>
			<li>
~IF［
`internals^l ~IN %不能化された特能~群
］
⇒
%内部特能を不能化するか ~SET ~T
◎
If disabledFeatures contains "internals", then set disableInternals to true.
</li>
			<li>
~IF［
`shadow^l ~IN %不能化された特能~群
］
⇒
%~shadowを不能化するか ~SET ~T
◎
If disabledFeatures contains "shadow", then set disableShadow to true.
</li>
			<li>
%~formに所有され得る値 ~LET
~ABRUPT `Get$jA( %constructor, `formAssociated^l )
◎
Let formAssociatedValue be ? Get( constructor, "formAssociated").
</li>
			<li>
%~formに所有され得るか ~SET `~IDL値に変換する$( %~formに所有され得る値, `boolean^c )
◎
Set formAssociated to the result of converting formAssociatedValue to a boolean.
</li>
			<li>
<p>
« `formAssociatedCallback^l, `formResetCallback^l, `formDisabledCallback^l, `formStateRestoreCallback^l »
を成す
~EACH( %~callback名 )
に対し：
◎
↓If formAssociated is true,＼
then for each callbackName of « "formAssociatedCallback", "formResetCallback", "formDisabledCallback", "formStateRestoreCallback" »:
</p>
				<ol>
					<li>
%~lifecycle~callback群[ %~callback名 ] ~SET ~NULL
【この段は、この訳による補完。】
</li>
					<li>
~IF［
%~formに所有され得るか ~EQ ~F
］
⇒
~CONTINUE
◎
↑</li>
					<li>
%~callback値 ~LET
~ABRUPT `Get$jA( %~prototype, %~callback名 )
◎
Let callbackValue be ? Get(prototype, callbackName).
</li>
					<li>
~IF［
%~callback値 ~NEQ `undefined^jv
］
⇒
%~lifecycle~callback群[ %~callback名 ] ~SET
`~IDL値に変換する$( %~callback値, `Function$I )
◎
If callbackValue is not undefined, then set lifecycleCallbacks[callbackName] to the result of converting callbackValue to the Web IDL Function callback type.
</li>
				</ol>
			</li>
			<li>
コレの`要素~定義は走っているか$cR ~SET ~F
◎
↓</li>
		</ol>

<p>
`(A)^i
上で例外 %例外 が投出されたときは：
◎
Then, regardless of whether the above steps threw an exception or not:＼
</p>
		<ol>
			<li>
コレの`要素~定義は走っているか$cR ~SET ~F
◎
set this's element definition is running to false.
</li>
			<li>
~THROW %例外
◎
Finally, if the steps threw an exception, rethrow that exception.
</li>
		</ol>
	</li>
	<li>
%定義 ~LET 新たな`~custom要素~定義$
— その
⇒＃
`名前$cD ~SET %name,
`局所~名$cD ~SET %局所~名,
`構築子$cD ~SET %constructor,
`観測される属性~群$cD ~SET %観測される属性~群,
`~lifecycle~callback~map$cD ~SET %~lifecycle~callback群
`~formに所有され得るか$cD ~SET %~formに所有され得るか,
`内部特能を不能化するか$cD ~SET %内部特能を不能化するか,
`~shadowを不能化するか$cD ~SET %~shadowを不能化するか
◎
Let definition be a new custom element definition with name name, local name localName, constructor constructor, observed attributes observedAttributes, lifecycle callbacks lifecycleCallbacks, form-associated formAssociated, disable internals disableInternals, and disable shadow disableShadow.
</li>
	<li>
コレの`~custom要素~定義~集合$cRに %定義 を`付加する$set
◎
Append definition to this's custom element definition set.
</li>
	<li>
~IF［
コレの`視野~付きか$cR ~EQ ~T
］
⇒
コレの`視野~付き文書~集合$cRを成す
~EACH( %文書 )
に対し
⇒
`文書の中の特定0の要素たちを昇格する$( コレ, %文書, %定義, %局所~名 )
◎
If this's is scoped is true, then for each document of this's scoped document set: upgrade particular elements within a document given this, document, definition, and localName.
</li>
	<li>
~ELSE
⇒
`文書の中の特定0の要素たちを昇格する$( コレ, コレに`関連な大域~obj$に`結付けられた文書$, %定義, %局所~名, %name )
◎
Otherwise, upgrade particular elements within a document given this, this's relevant global object's associated Document, definition, localName, and name.
</li>
	<li>
%~map ~LET コレの`定義-済み時~promise~map$cR
◎
↓</li>
	<li>
<p>
~IF［
%~map[ %name ] ~NEQ ε
］：
◎
If this's when-defined promise map[name] exists:
</p>
		<ol>
			<li>
`~promiseを解決する$( %~map[ %name ], %constructor )
◎
Resolve this's when-defined promise map[name] with constructor.
</li>
			<li>
%~map[ %name ] ~SET ε
◎
Remove this's when-defined promise map[name].
</li>
		</ol>
	</li>
</ol>
</div>

<div class="algo">
<p>
`文書の中の特定0の要素たちを昇格する@
~algoは、
所与の
⇒＃
`CustomElementRegistry$I ~obj %~registry,
`文書$ %文書,
`~custom要素~定義$ %定義,
文字列 %局所~名,
文字列 %名前（省略時は %局所~名 )
◎終
に対し：
◎
To upgrade particular elements within a document given a CustomElementRegistry object registry, a Document object document, a custom element definition definition, a string localName, and optionally a string name (default localName):
</p>
<ol>
	<li>
<p>
%昇格~候補~群 ~LET %文書 の`~shadowも含めた子孫$のうち［
~AND↓ を満たす`要素$
］たちが成す，
`~shadowも含めた~tree順序$による~list：
</p>
		<ul>
			<li>
その`~custom要素~registry$el ~EQ %~registry
</li>
			<li>
その`名前空間$el ~EQ `~HTML名前空間$
</li>
			<li>
その`局所~名$el ~EQ %局所~名
</li>
			<li>
［
%名前 ~NEQ %局所~名
］ならば、
次も満たす
⇒
その`~is0値$el ~EQ %名前
</li>
		</ul>
◎
Let upgradeCandidates be all elements that are shadow-including descendants of document, whose custom element registry is registry, whose namespace is the HTML namespace, and whose local name is localName, in shadow-including tree order. Additionally, if name is not localName, only include elements whose is value is equal to name.
</li>
	<li>
%昇格~候補~群 を成す
~EACH( %要素 )
に対し
⇒
`~custom要素~昇格~反応を~enqueueする$( %要素, %定義 )
◎
For each element element of upgradeCandidates: enqueue a custom element upgrade reaction given element and definition.
</li>
</ol>
</div>

<div class="algo">
<p>
`get(name)@m
~method手続きは：
◎
The get(name) method steps are:
</p>
<ol>
	<li>
コレの`~custom要素~定義~集合$cRを成す
~EACH( %定義 )
に対し
⇒
~IF［
%定義 の`名前$cD ~EQ %name
］
⇒
~RET %定義 の`構築子$cD
◎
If this's custom element definition set contains an item with name name, then return that item's constructor.
</li>
	<li>
~RET `undefined^jv
◎
Return undefined.
</li>
</ol>
</div>

<div class="algo">
<p>
`getName(constructor)@m
~method手続きは：
◎
The getName(constructor) method steps are:
</p>
<ol>
	<li>
コレの`~custom要素~定義~集合$cRを成す
~EACH( %定義 )
に対し
⇒
~IF［
%定義 の`構築子$cD ~EQ %constructor
］
⇒
~RET %定義 の`名前$cD
◎
If this's custom element definition set contains an item with constructor constructor, then return that item's name.
</li>
	<li>
~RET ~NULL
◎
Return null.
</li>
</ol>
</div>

<div class="algo">
<p>
`whenDefined(name)@m
~method手続きは：
◎
The whenDefined(name) method steps are:
</p>
<ol>
	<li>
~IF［
%name は`妥当な~custom要素~名$でない
］
⇒
~RET `却下される~promise$( `SyntaxError$E 例外 )
◎
If name is not a valid custom element name, then return a promise rejected with a "SyntaxError" DOMException.
</li>
	<li>
コレの`~custom要素~定義~集合$cRを成す
~EACH( %定義 )
に対し
⇒
~IF［
%定義 の`名前$cD ~EQ %name
］
⇒
~RET `解決される~promise$( %定義 の`構築子$cD )
◎
If this's custom element definition set contains an item with name name, then return a promise resolved with that item's constructor.
</li>
	<li>
%~map ~LET コレの`定義-済み時~promise~map$cR
◎
↓</li>
	<li>
~IF［
%~map[ %name ] ~EQ ε
］
⇒
%~map[ %name ] ~SET `新たな~promise$
◎
If this's when-defined promise map[name] does not exist, then set this's when-defined promise map[name] to a new promise.
</li>
	<li>
~RET %~map[ %name ]
◎
Return this's when-defined promise map[name].
</li>
</ol>
</div>

<div class="example">
<p>
`whenDefined()$m ~methodは、
適切な`~custom要素$がすべて`定義-済み$elになるまでは，
動作が遂行されるのを避けたいときに利用できる。
次の例では、
`defined$ps 疑似類と組合せて、
利用する`自律的~custom要素$がすべて定義-済みになるまでは，
動的に読込まれる記事の内容（ %articleContainer ）を隠す。
◎
The whenDefined() method can be used to avoid performing an action until all appropriate custom elements are defined. In this example, we combine it with the :defined pseudo-class to hide a dynamically-loaded article's contents until we're sure that all of the autonomous custom elements it uses are defined.
</p>

<pre class="lang-js">
%articleContainer.hidden = true;

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

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

<div class="algo">
<p>
`upgrade(root)@m
~method手続きは：
◎
The upgrade(root) method steps are:
</p>
<ol>
	<li>
%候補~群 ~LET %root の`~shadowも含めた広義-子孫$である要素たち成す，
`~shadowも含めた~tree順序$による`~list$
◎
Let candidates be a list of all of root's shadow-including inclusive descendant elements, in shadow-including tree order.
</li>
<li>
%候補~群 を成す
~EACH( %候補 )
に対し
⇒
`要素を昇格するよう試行する$( %候補 )
◎
For each candidate of candidates, try to upgrade candidate.
</li>
</ol>
</div>

<div class="example">
<p>
`upgrade()$m ~methodを利用すれば、
要素を意のままに昇格できる。
<!-- `接続されて$いるになったとき -->
通常は，要素は`接続されたとき$に自動的に昇格されるが、
そうなる前に昇格する必要があるときなど。
◎
The upgrade() method allows upgrading of elements at will. Normally elements are automatically upgraded when they become connected, but this method can be used if you need to upgrade before you're ready to connect the element.
</p>

<pre class="lang-js">
const %el = document.createElement("spider-man");

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

console.assert(!(%el instanceof SpiderMan)); /* <span class="comment">
まだ昇格されていない
◎
not yet upgraded
</span> */

customElements.upgrade(%el);
console.assert(%el instanceof SpiderMan);    /* <span class="comment">
昇格された
◎
upgraded!</span> */
</pre>
</div>

<div class="algo">
<p>
`initialize(root)@m
~method手続きは：
◎
The initialize(root) method steps are:
</p>
<ol>
	<li>
~IF［
%root は`文書$である
］~AND［
%root の`~custom要素~registry$doc ~EQ ~NULL
］
⇒
%root の`~custom要素~registry$doc ~SET コレ
◎
If root is a Document node whose custom element registry is null, then set root's custom element registry to this.
</li>
	<li>
~ELIF［
%root は`~shadow根$である
］~AND［
%root の`~custom要素~registry$sR ~EQ ~NULL
］
⇒
%root の`~custom要素~registry$sR ~SET コレ
◎
Otherwise, if root is a ShadowRoot node whose custom element registry is null, then set root's custom element registry to this.
</li>
	<li>
<p>
%root の`広義-子孫$たちを成す
~EACH( %広義-子孫 )
に対し：
◎
For each inclusive descendant inclusiveDescendant of root:＼
</p>
		<ol>
			<li>
~IF［
%広義-子孫 は`要素$でない
］
⇒
~CONTINUE
◎
if inclusiveDescendant is an Element node＼
</li>
			<li>
~IF［
%広義-子孫 の`~custom要素~registry$el ~NEQ ~NULL
］
⇒
~CONTINUE
◎
whose custom element registry is null:
</li>
			<li>
%広義-子孫 の`~custom要素~registry$el ~SET コレ
◎
Set inclusiveDescendant's custom element registry to this.
</li>
			<li>
~IF［
コレの`視野~付きか$cR ~EQ ~T
］
⇒
コレの`視野~付き文書~集合$cRに %広義-子孫 の`~node文書$を`付加する$set
◎
If this's is scoped is true, then append inclusiveDescendant's node document to this's scoped document set.
</li>
		</ol>
	</li>
</ol>

<p class="note">注記：
~nodeの~custom要素~registryは、
ある `CustomElementRegistry$I ~objに初期化されて以降は，変更し得なくなる
— そのようにしたのは，意図的であり、［
~codeについての理屈を単純~化するため
］および［
最適化することを実装に許容するため
］である。
◎
Once the custom element registry of a node is initialized to a CustomElementRegistry object, it intentionally cannot be changed any further. This simplifies reasoning about code and allows implementations to optimize.
</p>
</div>

			</section>
			<section id="upgrades">
<h4 title="Upgrades">4.13.5. 昇格</h4>

<div class="algo">
<p>
`要素を昇格する@
~algoは、
所与の
( `~custom要素~定義$ %定義, 要素 %要素 )
に対し：
◎
To upgrade an element, given as input a custom element definition definition and an element element, run the following steps:
</p>

<ol>
	<li id="concept-upgrade-an-element-early-exit">
<p>
~IF［
%要素 の`~custom要素~状態$el ~NIN { `undefined^l, `uncustomized^l }
］
⇒
~RET
◎
If element's custom element state is not "undefined" or "uncustomized", then return.
</p>

<div class="example">
<p>
これが生じ得る局面は、
次の例に示すように，この~algoが再入的に呼出されたときである：
◎
One scenario where this can occur due to reentrant invocation of this algorithm, as in the following example:
</p>

<pre class="lang-html">
&lt;!DOCTYPE html&gt;
&lt;x-foo id="a"&gt;&lt;/x-foo&gt;
&lt;x-foo id="b"&gt;&lt;/x-foo&gt;

&lt;script&gt;
/* <span class="comment">
`a^v, `b^v の両者に対し，昇格~反応を~enqueueするように定義する：
◎
Defining enqueues upgrade reactions for both "a" and "b"
</span> */

customElements.define("x-foo", class extends HTMLElement {
  constructor() {
    super();

    const %b = document.querySelector("#b");
    %b.remove();

/* <span class="comment">
`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.
</span> */
    document.body.appendChild(%b);
  }
})
&lt;/script&gt;
</pre>

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

	</li>
	<li>
%要素 の`~custom要素~定義$el ~SET %定義
◎
Set element's custom element definition to definition.
</li>
	<li>
<p>
%要素 の`~custom要素~状態$el ~SET `failed^l
◎
Set element's custom element state to "failed".
</p>

<p class="note">注記：
`昇格に成功したなら＠#concept-upgrade-an-element-set-state-to-custom$，
`custom^l に設定されることになるが、
今は
— 再入的な呼出nが
`上の段＠#concept-upgrade-an-element-early-exit$で弾かれるよう —
`failed^l に設定する
◎
It will be set to "custom" after the upgrade succeeds. For now, we set it to "failed" so that any reentrant invocations will hit the above early-exit step.
</p>
	</li>
	<li>
%要素 の`属性~list$を成す
~EACH ( %属性 )
に対し，順に
⇒
`~custom要素~callback反応を~enqueueする$(
%要素,
`attributeChangedCallback^l,
« %属性 の`局所~名$attr, ~NULL, %属性 の`値$attr, %属性 の`名前空間$attr »
)
◎
For each attribute in element's attribute list, in order, enqueue a custom element callback reaction with element, callback name "attributeChangedCallback", and « attribute's local name, null, attribute's value, attribute's namespace ».
</li>
	<li>
~IF［
%要素 は`接続されて$いる
］
⇒
`~custom要素~callback反応を~enqueueする$(
%要素, `connectedCallback^l, « »
)
◎
If element is connected, then enqueue a custom element callback reaction with element, callback name "connectedCallback", and « ».
</li>
	<li>
%定義 の`構築~stack$cDの末尾に %要素 を追加する
◎
Add element to the end of definition's construction stack.
</li>
	<li>
%C ~LET %定義 の`構築子$cD
◎
Let C be definition's constructor.
</li>
	<li>
`~surrounding~agent$にて`作動中な~custom要素~構築子~map$[ %C ] ~SET %要素 の`~custom要素~registry$el
◎
Set the surrounding agent's active custom element constructor map[C] to element's custom element registry.
</li>
	<li>
%例外 ~LET ε
◎
↓</li>
	<li>
<p>
`(A)^i：
◎
Run the following steps while catching any exceptions:
</p>
		<ol>
			<li>
<p>
~IF［
%定義 の`~shadowを不能化するか$cD ~EQ ~T
］~AND［
%要素 の`~shadow根$el ~NEQ ~NULL
］
⇒＃
%例外 ~SET 新たな `NotSupportedError$E 例外；
~BREAK `(A)^i
◎
If definition's disable shadow is true and element's shadow root is non-null, then throw a "NotSupportedError" DOMException.
</p>

<p class="note">注記：
この段が必要になるのは、
`attachShadow()$m が`~custom要素~定義を検索する$を利用しないためである
— `attachInternals()$m は、それを利用するが。
◎
This is needed as attachShadow() does not use look up a custom element definition while attachInternals() does.
</p>
			</li>
			<li>
%要素 の`~custom要素~状態$el ~SET `precustomized^l
◎
Set element's custom element state to "precustomized".
</li>
			<li>
<p>
%構築-結果 ~LET `~callback関数で構築する$( %C, 空な引数~list )
◎
Let constructResult be the result of constructing C, with no arguments.
</p>

<p>
この段で例外 %e が投出されたときは、
catchして
⇒＃
%例外 ~SET %e ；
~BREAK `(A)^i
◎
↑</p>

<div class="note">
<p>注記：
この~algoの始めの方で~enqueueされた反応は：
</p>
<ul>
	<li>
%C が`不適合tに＠#custom-element-conformance$ `CEReactions$xA 拡張d属性を伴う~APIを利用している場合には、
%C が完遂して，この~algoに制御を返す前に，
この段の間に実行されることになる。
</li>
	<li>
他の場合、
%C と残りの昇格~処理nを完遂した後に実行されることになる。
</li>
</ul>
◎
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.
</div>
			</li>
			<li>
<p>
~IF［
`SameValue$jA( %構築-結果 . `value^sl, %要素 ) ~EQ ~F
］
⇒＃
%例外 ~SET 新たな `TypeError$E ；
~BREAK `(A)^i
◎
If SameValue(constructResult, element) is false, then throw a TypeError.
</p>

<div class="note">
<p>
注記：
これが生じ得るのは、
%C が次のいずれかを行う場合である：
</p>
				<ul>
					<li>
`super()^c を~callする前に，
同じ~custom要素の別の~instanceを構築している。
</li>
					<li>
~JSによる［
`return^c を上書きする特能
］を利用して，
構築子から任意な `HTMLElement$I ~objを返している。
</li>
				</ul>
◎
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 HTMLElement object from the constructor.
</div>
			</li>
		</ol>
	</li>
	<li>
<p>
`~surrounding~agent$にて`作動中な~custom要素~構築子~map$[ %C ] ~SET ε
◎
↑ Then, perform the following steps, regardless of whether the above steps threw an exception or not:
• Remove the surrounding agent's active custom element constructor map[C].
</p>

<p class="note">注記：
これは、
%C が `super()^c を~~要求どおり即時に~callする場合には，何もしない。
◎
• This is a no-op if C immediately calls super() as it ought to do.
</p>
	</li>
	<li>
<p>
%定義 の`構築~stack$cDから最後の~entryを除去する
◎
• Remove the last entry from the end of definition's construction stack.
</p>

<div class="note">
<p>注記：
%C が `super()^c を~callして（`適合t＠#custom-element-conformance$ならば そうすることになる）, かつ
その~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.)
</p>

<p>
そうでない場合
（ `super()^c を~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.
</p>
</div>
	</li>
	<li>
<p>
~IF［
%例外 ~NEQ ε
］：
◎
• Finally, if the above steps threw an exception, then:
</p>
		<ol>
			<li>
%要素 の`~custom要素~定義$el ~SET ~NULL
◎
• Set element's custom element definition to null.
</li>
			<li>
%要素 の`~custom要素~反応~queue$を空にする
◎
• Empty element's custom element reaction queue.
</li>
			<li>
~THROW %例外
◎
• Rethrow the exception (thus terminating this algorithm).
</li>
		</ol>

<p class="note">注記：
上の `(A)^i で例外が生じた場合、
%要素 の`~custom要素~状態$elは［
`failed^l ／ `precustomized^l
］であり続けることになる。
◎
• If the above steps threw an exception, then element's custom element state will remain "failed" or "precustomized".
</p>
	</li>
	<li>
<p>
~IF［
%要素 は`~formに所有され得る~custom要素$である
］：
◎
If element is a form-associated custom element, then:
</p>
		<ol>
			<li>
`~form所有者を設定し直す$( %要素 )
◎
Reset the form owner of element.＼
</li>
			<li>
~IF［
%要素 の`~form所有者$ ~NEQ ~NULL
］
⇒
`~custom要素~callback反応を~enqueueする$( %要素, `formAssociatedCallback^l, « %要素 の`~form所有者$ » )
◎
If element is associated with a form element, then enqueue a custom element callback reaction with element, callback name "formAssociatedCallback", and « the associated form ».
</li>
			<li>
~IF［
%要素 は`不能化されて$feいる
］
⇒
`~custom要素~callback反応を~enqueueする$( %要素, `formDisabledCallback^l, « ~T » )
◎
If element is disabled, then enqueue a custom element callback reaction with element, callback name "formDisabledCallback", and « true ».
</li>
		</ol>
	</li>
	<li id="concept-upgrade-an-element-set-state-to-custom">
%要素 の`~custom要素~状態$el ~SET `custom^l
◎
Set element's custom element state to "custom".
</li>
</ol>
</div>

<div class="algo">
<p>
`要素を昇格するよう試行する@
~algoは、
所与の
( 要素 %要素 )
に対し：
◎
To try to upgrade an element given an element element:
</p>
<ol>
	<li>
%定義 ~LET `~custom要素~定義を検索する$( %要素 の`~custom要素~registry$el, %要素 の`名前空間$el, %要素 の`局所~名$el, %要素 の`~is0値$el )
◎
Let definition be the result of looking up a custom element definition given element's custom element registry, element's namespace, element's local name, and element's is value.
</li>
	<li>
~IF［
%定義 ~NEQ ~NULL
］
⇒
`~custom要素~昇格~反応を~enqueueする$( %要素, %定義 )
◎
If definition is not null, then enqueue a custom element upgrade reaction given element and definition.
</li>
</ol>
</div>

			</section>
			<section id="custom-element-reactions">
<h4 title="Custom element reactions">4.13.6. ~custom要素~反応</h4>

<p>
`~custom要素$ %要素 は、
作者~codeを走らすことにより，一定の出来事に応答する能を備える：
◎
A custom element possesses the ability to respond to certain occurrences by running author code:
</p>
<ul>
	<li>
%要素 が`昇格$されたときは、
`~custom要素~構築子$が引数なしで走る。
◎
When upgraded, its constructor is run, with no arguments.
</li>
	<li>
%要素 が`接続されたとき$は、
%要素 の `connectedCallback^c が引数なしで~callされる。
◎
When it becomes connected, its connectedCallback is called, with no arguments.
</li>
	<li>
%要素 が`切断されたとき$は、
%要素 の `disconnectedCallback^c が引数なしで~callされる。
◎
When it becomes disconnected, its disconnectedCallback is called, with no arguments.
</li>
	<li>
%要素 が`移動-$されたときは、
%要素 の `connectedMoveCallback^c が引数なしで~callされる。
◎
When it is moved, its connectedMoveCallback is called, with no arguments.
</li>
	<li>
%要素 が他の文書に`受入された＠~DOM4#concept-node-adopt$ときは、
%要素 の `adoptedCallback^c が
( 旧-文書, 新-文書 )
を引数に~callされる。
◎
When it is adopted into a new document, its adoptedCallback is called, given the old document and new document as arguments.
</li>
	<li>
%要素 のいずれかの属性が［
`変更された＠~DOM4#concept-element-attributes-change$ ／
`付加された＠~DOM4#concept-element-attributes-append$ ／
`除去された＠~DOM4#concept-element-attributes-remove$ ／
`置換された＠~DOM4#concept-element-attributes-replace$
］ときは、
%要素 の `attributeChangedCallback^c が当の属性の
( `局所~名$attr, 旧-`値$attr, 新-`値$attr, `名前空間$attr )
を引数に~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.)
</li>
	<li>
<p>
%要素 が`~formに所有され得る~custom要素$でもある場合：
◎
↓</p>
		<ul>
			<li>
［
%要素 の`~form所有者を設定し直す$ことにより，
%要素 の`~form所有者$が変化した
］ときは、
%要素 の `formAssociatedCallback^c が
( 変化-後の~form所有者（ ~NULL にもなり得る） )
を引数に~callされる。
◎
When the user agent resets the form owner of a form-associated custom element and doing so changes the form owner, its formAssociatedCallback is called, given the new form owner (or null if no owner) as an argument.
</li>
			<li>
［
`~formを再設定する$ことにより，
%要素 の`再設定~algo$が呼出された
］ときは、
%要素 の `formResetCallback^c が~callされる。
◎
When the form owner of a form-associated custom element is reset, its formResetCallback is called.
</li>
			<li>
%要素 が`不能化されて$feいるか否かが変化したときは、
%要素 の `formDisabledCallback^c が
( 新たな状態 )
を引数に~callされる。
◎
When the disabled state of a form-associated custom element is changed, its formDisabledCallback is called, given the new state as an argument.
</li>
			<li>
~UAが［
利用者に利するため／
`~naviの一部＠~HTMLnav#restore-persisted-state$
］として`~formに所有され得る~custom要素$の値【`値＠~HTMLforms#concept-fe-value$？】を更新したときは、
%要素 の `formStateRestoreCallback^c が
( 新たな状態, 理由を指示する文字列［
`autocomplete^l ／ `restore^l
］ )
を引数に~callされる。
◎
When user agent updates a form-associated custom element's value on behalf of a user or as part of navigation, its formStateRestoreCallback is called, given the new state and a string indicating a reason, "autocomplete" or "restore", as arguments.
</li>
		</ul>
	</li>
</ul>

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

<p>
`~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.
</p>

<p>
加えて，これらの反応の精確な順序付けは、
以下に述べる［
~queueたちが成す~stackに基づく，いくぶん複雑な~system
］を介して管理される。
この~systemの背後にある意図nは、
少なくとも［
単独の`~custom要素$における局所的な文脈
］の中では，［
各`~custom要素~反応$は、
常に，それらを誘発した動作たちの順序と同じ順序で呼出される
］ことを保証することである。
（`~custom要素~反応$の~codeは，自前で【他の要素に対する】変異を遂行できるので、
複数の要素にわたる大域的な順序付けを保証することは，アリでない）
◎
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.)
</p>

<hr>

<p>
各 `生成元が類似な~window~agent$ %A には、
`~custom要素~反応~stack@
があり，初期~時は空とする。
この~stackを成す各~itemは、
`要素~queue@
であり，これらも初期~時は空とする。
また、
この~stackの一番上に積まれた`要素~queue$を，特に %A の
`現在の要素~queue@
という。
`要素~queue$を成す各~itemは、
要素である
（この~queueは，`昇格$用にも利用されるので、
各~要素は，この時点では必ずしも`~custom$elであるとは限らない）。
◎
Each similar-origin window agent has a custom element reactions stack, which is initially empty. A similar-origin window agent's current element queue is the element queue at the top of its 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.)
</p>

<p>
各`~custom要素~反応~stack$には、
`予備の要素~queue@
も結付けられる
— それは、`要素~queue$であり，初期~時は空とする。
［
`CEReactions$xA 付きの~APIを通さずに, あるいは
構文解析器の`~tokenに対し要素を作成する$~algoを通して
］~DOMに影響するような演算の間、
要素は`予備の要素~queue$に~pushされる。
例えば、
`編集-可能$な要素の子孫や属性を改変するような，利用者により起動される編集~演算が挙げられる。
`予備の要素~queue$の処理-時における再入を防ぐため、
各`~custom要素~反応~stack$には，
`予備の要素~queueは処理-中か@
も結付けられる
— それは、真偽値であり，初期-時は ~F とする。
◎
Each custom element reactions stack has an associated backup element queue, which is 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.
</p>

<p>
各 要素には、
`~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:
</p>
<ul>
	<li>
`昇格~反応@
⇒
これは、
~custom要素を`昇格$することになり，`~custom要素~定義$を包含する。
◎
An upgrade reaction, which will upgrade the custom element and contains a custom element definition; or
</li>
	<li>
`~callback反応@
⇒
これは、
~lifecycle~callbackを~callすることになり，［
~callback関数, その引数たちが成す~list
］を包含する。
◎
A callback reaction, which will call a lifecycle callback, and contains a callback function as well as a list of arguments.
</li>
</ul>

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

<figure>
<div id="_CE-reactions">
<img
	src="HTML-resources/custom-element-reactions.svg"
	style="width:100%; height:100%; margin:0;"
	alt="関係図"
/>
	<div style="top:0.25em; left:0.5em; width:8em;"
	><span>~custom要素<br>反応~stack</span></div>

	<div style="top:5em; left:13em; width:12em;"
	><span>要素~queue</span></div>

	<div style="top:14em; left:7em; width:16em;"
	><span>~custom要素~反応~queue</span></div>
	<div class="_reaction" style="left:7em; line-height:2em;"
	><span>昇格~時</span></div>
	<div class="_reaction" style="left:11em; line-height:1em;"
	><span>属性<br>変更-時</span></div>
	<div class="_reaction" style="left:15em; line-height:1em;"
	><span>属性<br>変更-時</span></div>
	<div class="_reaction" style="left:19em; line-height:2em;"
	><span>接続-時</span></div>
</div>

<figcaption>
~custom要素~反応~stackは、
要素~queueたちが成す~stackである。
図のある~queueに着目すると，いくつかの要素
（この例では、 &lt;x-a&gt;, &lt;x-b&gt;, &lt;x-c&gt;, … ）
を包含していることが見てとれる。
~queueを成すどの要素も、
~custom要素~反応~queueを有する。
ある~custom要素~反応~queueに着目すれば，
~queueされた種々の反応を包含していることが見てとれる
（この例では、［
昇格~時, 属性~変更-時, もう一つの属性~変更-時, 接続-時
］に反応するもの）。
◎
A custom element reactions stack consists of a stack of element queues. Zooming in on a particular queue, we see that it contains a number of elements (in our example, &lt;x-a&gt;, then &lt;x-b&gt;, then &lt;x-c&gt;). Any particular element in the queue then has a custom element reaction queue. Zooming in on the custom element reaction queue, we see that it contains a variety of queued-up reactions (in our example, upgrade, then attribute changed, then another attribute changed, then connected).
</figcaption></figure>

<div class="algo">
<p>
`適切な要素~queueに~enqueueする@
~algoは、
所与の
( 要素 %要素 )
に対し：
◎
To enqueue an element on the appropriate element queue, given an element element, run the following steps:
</p>

<ol>
	<li>
%反応~stack ~LET %要素 に`関連な~agent$の`~custom要素~反応~stack$
◎
Let reactionsStack be element's relevant agent's custom element reactions stack.
</li>
	<li>
<p>
~IF［
%反応~stack は空である
］：
◎
If reactionsStack is empty, then:
</p>
		<ol>
			<li>
%要素 を %反応~stack の`予備の要素~queue$に追加する
◎
Add element to reactionsStack's backup element queue.
</li>
			<li>
~IF［
%反応~stack の`予備の要素~queueは処理-中か$ ~EQ ~T
］
⇒
~RET
◎
If reactionsStack's processing the backup element queue flag is set, then return.
</li>
			<li>
%反応~stack の`予備の要素~queueは処理-中か$ ~SET ~T
◎
Set reactionsStack's processing the backup element queue flag.
</li>
			<li>
<p>
`小taskを~queueする$( 次の手続き )
◎
Queue a microtask to perform the following steps:
</p>

<div class="algo">
<p>
手続きは：
◎
↑</p>
				<ol>
					<li>
`~custom要素~反応たちを呼出す$( %反応~stack の`予備の要素~queue$ )
◎
Invoke custom element reactions in reactionsStack's backup element queue.
</li>
					<li>
%反応~stack の`予備の要素~queueは処理-中か$ ~SET ~F
◎
Unset reactionsStack's processing the backup element queue flag.
</li>
				</ol>
</div>
			</li>
		</ol>
	</li>
	<li>
~ELSE
⇒
%要素 を %要素 に`関連な~agent$の`現在の要素~queue$に追加する
◎
Otherwise, add element to element's relevant agent's current element queue.
</li>
</ol>
</div>

<div class="algo">
<p>
`~custom要素~callback反応を~enqueueする@
~algoは、
所与の
( `~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:
</p>

<ol>
	<li>
%定義 ~LET  %要素 の`~custom要素~定義$el
◎
Let definition be element's custom element definition.
</li>
	<li>
%~callback ~LET %定義 の`~lifecycle~callback~map$cD[ %~callback名 ]
◎
Let callback be the value of the entry in definition's lifecycle callbacks with key callbackName.
</li>
	<li>
<p>
~IF［
%~callback名 ~EQ `connectedMoveCallback^l
］~AND［
%~callback ~EQ ~NULL
］：
◎
If callbackName is "connectedMoveCallback" and callback is null:
</p>
		<ol>
			<li>
%切断-時の~callback ~LET %定義 の`~lifecycle~callback~map$cD[ `disconnectedCallback^l ]
◎
Let disconnectedCallback be the value of the entry in definition's lifecycle callbacks with key "disconnectedCallback".
</li>
			<li>
%接続-時の~callback ~LET %定義 の`~lifecycle~callback~map$cD[ `connectedCallback^l ]
◎
Let connectedCallback be the value of the entry in definition's lifecycle callbacks with key "connectedCallback".
</li>
			<li>
~IF［
%接続-時の~callback ~EQ ~NULL
］~AND［
%切断-時の~callback ~EQ ~NULL
］
⇒
~RET
◎
If connectedCallback and disconnectedCallback are null, then return.
</li>
			<li class="algo">
<p>
%~callback ~SET 次の手続き：
◎
Set callback to the following steps:
</p>
				<ol>
					<li>
~IF［
%切断-時の~callback ~NEQ ~NULL
］
⇒
%切断-時の~callback を引数なしで~callする
◎
If disconnectedCallback is not null, then call disconnectedCallback with no arguments.
</li>
					<li>
~IF［
%接続-時の~callback ~NEQ ~NULL
］
⇒
%接続-時の~callback を引数なしで~callする
◎
If connectedCallback is not null, then call connectedCallback with no arguments.
</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>
~IF［
%~callback ~EQ ~NULL
］
⇒
~RET
◎
If callback is null, then return.
</li>
	<li>
<p>
~IF［
%~callback名 ~EQ `attributeChangedCallback^l
］：
◎
If callbackName is "attributeChangedCallback":
</p>
		<ol>
			<li>
~Assert：
%引数~list は空でない【この段は、この訳による補完】
</li>
			<li>
%属性~名 ~LET %引数~list[ 0 ]
◎
Let attributeName be the first element of args.
</li>
			<li>
~IF［
%属性~名 ~NIN %定義 の`観測される属性~群$cD
］
⇒
~RET
◎
If definition's observed attributes does not contain attributeName, then return.
</li>
		</ol>
	</li>
	<li>
%要素 の`~custom要素~反応~queue$に次を追加する
⇒
( ~callback関数, 引数~list ) として ( %~callback, %引数~list ) を伴う，
新たな`~callback反応$
◎
Add a new callback reaction to element's custom element reaction queue, with callback function callback and arguments args.
</li>
	<li>
`適切な要素~queueに~enqueueする$( %要素 )
◎
Enqueue an element on the appropriate element queue given element.
</li>
</ol>
</div>

<div class="algo">
<p>
`~custom要素~昇格~反応を~enqueueする@
~algoは、
所与の
( 要素 %要素, `~custom要素~定義$ %定義 )
に対し：
◎
To enqueue a custom element upgrade reaction, given an element element and custom element definition definition, run the following steps:
</p>

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

<div class="algo">
<p>
`~custom要素~反応たちを呼出す@
~algoは、
所与の
( `要素~queue$ %~queue )
に対し：
◎
To invoke custom element reactions in an element queue queue, run the following steps:
</p>

<ol>
	<li>
<p>
~WHILE［
%~queue は`空$でない
］：
◎
While queue is not empty:
</p>
		<ol>
			<li>
%要素 ~LET %~queue から`~dequeueする$
◎
Let element be the result of dequeuing from queue.
</li>
			<li>
%反応~queue ~LET %要素 の`~custom要素~反応~queue$
◎
Let reactions be element's custom element reaction queue.
</li>
			<li>
<p>
~WHILE［
%反応~queue は空でない
］：
◎
Repeat until reactions is empty:
</p>
				<ol>
					<li>
%反応~queue から最初の~itemを除去する
◎
Remove the first element of reactions, and＼
</li>
					<li>
%反応 ~LET 前~段で除去した~item
◎
let reaction be that element.＼
Switch on reaction's type:
</li>
					<li>
<p>
~IF［
%反応 は`昇格~反応$である
］
⇒
`要素を昇格する$( %反応 の`~custom要素~定義$, %要素 )
◎
• upgrade reaction
•• Upgrade element using reaction's custom element definition.
</p>

<p>
例外 %e が投出されたときは、
~catchして
⇒
`例外を報告する$( %e, %反応 の`~custom要素~定義$の`構築子$cDに対応している~JS~objが`属する~realm$の`大域~obj$rM )
◎
•• If this throws an exception, catch it, and report it for reaction's custom element definition's constructor's corresponding JavaScript object's associated realm's global object.
</p>
					</li>
					<li>
~ELSE
（ %反応 は`~callback反応$である）
⇒
`~callback関数を呼出す$( %反応 の~callback関数, %反応 の引数~list, `報告する^i, %要素 )
◎
• callback reaction
•• Invoke reaction's callback function with reaction's arguments and "report", and callback this value set to element.
</li>
				</ol>
			</li>
		</ol>
	</li>
</ol>
</div>

<hr>

<p>
`~custom要素~反応$が適切に誘発されることを確保するため、
この仕様は，
`CEReactions@xA
~IDL`拡張d属性$を導入する。
それは、
`~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.
</p>

<div>
<p>
`CEReactions$xA 拡張d属性は：
</p>

<ul><li>引数をとってはナラナイ。
</li><li>［
演算, 属性, 設定子, 削除子
］以外のものに現れてはナラナイ。
</li><li>読専（ `readonly^en ）属性~上に現れてはナラナイ。
</li></ul>

<p class="trans-note">【
これら各種~IDL用語の参照先：
`演算＠~WEBIDL#idl-operations$,
`属性＠~WEBIDL#idl-attributes$,
`設定子と削除子＠~WEBIDL#idl-special-operations$,
`読専＠~WEBIDL#dfn-read-only$
】</p>

◎
The [CEReactions] extended attribute must take no arguments, and must not appear on anything other than an operation, attribute, setter, or deleter. Additionally, it must not appear on readonly attributes.
</div>

<div class="algo">
<p>
`CEReactions$xA 拡張d属性で注釈された［
演算, 属性, 設定子, 削除子
］に対しては、
その［
演算／設定子／削除子／属性の設定子
］の記述に指定された手続き %手続き に代えて，次を走らすモノトスル：
◎
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:
</p>

<ol>
	<li>
コレに`関連な~agent$の`~custom要素~反応~stack$に新たな`要素~queue$を`~pushする$
◎
Push a new element queue onto this object's relevant agent's custom element reactions stack.
</li>
	<li>
%例外 ~LET ε
◎
↓</li>
	<li>
%値 ~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.
</li>
	<li>
%~queue ~LET コレに`関連な~agent$の`~custom要素~反応~stack$から`~popする$
◎
Let queue be the result of popping from this object's relevant agent's custom element reactions stack.
</li>
	<li>
`~custom要素~反応たちを呼出す$( %~queue )
◎
Invoke custom element reactions in queue.
</li>
	<li>
~IF［
%例外 ~NEQ ε
］
⇒
~THROW %例外
◎
If an exception exception was thrown by the original steps, rethrow exception.
</li>
	<li>
~RET %値
◎
If a value value was returned from the original steps, return value.
</li>
</ol>
</div>

<div class="note">
<p>注記：
この拡張d属性の背後にある意図には、
微妙な所がある。
その目標を成遂げるためには、
代わりに，次を記しておく仕方もあるが…：
◎
The intent behind this extended attribute is somewhat subtle. One way of accomplishing its goals would be to say that＼
</p>
<ul>
	<li>
~platformの どの［
演算, 属性, 設定子, 削除子
］にも，上述の手続きを挿入しなければならない。
◎
every operation, attribute, setter, and deleter on the platform must have these steps inserted,＼
</li>
	<li>
実装者には、
不必要な事例については最適化して外すことも許容される
（そこでは、
`~custom要素~反応$を生じさせるような~DOM変異は，アリでない）。
◎
and to allow implementers to optimize away unnecessary cases (where no DOM mutation is possible that could cause custom element reactions to occur).
</li>
</ul>

<p>
…が，このような不精確な~~指定では、
実施において相互運用可能でない`~custom要素~反応$の実装へ至らせ得る
— ある実装は、
一部の事例で，この手続きを呼出すのを忘れるかもしれない。
相互運用可能な挙動を確保する代わりの仕方として、
次の~approachに決着した
⇒
関連な どの~IDL構成子にも，この拡張d属性で明示的に注釈して、
この手続きが必要yな事例~すべてを，実装者が容易に見分けられるようする。
◎
However, in practice this imprecision could lead to non-interoperable implementations of custom element reactions, as some implementations might forget to invoke these steps in some cases. Instead, we settled on the approach of explicitly annotating all relevant IDL constructs, as a way of ensuring interoperable behavior and helping implementations easily pinpoint all cases where these steps are necessary.
</p>
</div>

<p>
~UAにより導入される標準でない~APIのうち，~DOMを改変し得るもの
— 例えば、何らかの属性や子~要素を改変するもの —
は、
その結果［
`~custom要素~callback反応を~enqueueする$ ／
`~custom要素~昇格~反応を~enqueueする$
］ことになるならば，
`CEReactions$xA 拡張d属性で注釈されなければナラナイ。
◎
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.
</p>

<div class="note">
<p>注記：
これを書いた時点では、
次に挙げる［
標準でない, または標準~化されていない
］~APIが，これに該当するものとして知られている：
◎
As of the time of this writing, the following nonstandard or not-yet-standardized APIs are known to fall into this category:
</p>

<ul>
	<li>
`HTMLInputElement$I の［
`webkitdirectory^m, `incremental^m
］~IDL属性
◎
HTMLInputElement's webkitdirectory and incremental IDL attributes
</li>
	<li>
`HTMLLinkElement$I の `scope^m ~IDL属性
◎
HTMLLinkElement's scope IDL attribute
</li>
</ul>
</div>

			</section>
			<section id="element-internals">
<h4 title="Element internals">4.13.7. 要素の内部特能</h4>

<p>
一定の能力は、
~custom要素の消費者ではなく，その作者から可用になるものと意味される。
それらは、
`attachInternals()$m ~methodが返す `ElementInternals$I の~instanceにより供される。
`ElementInternals$I の各種［
~prop／~method
］は、［
~UAがすべての要素に供する内部~特能
］に対する制御を許容する。
◎
Certain capabilities are meant to be available to a custom element author, but not to a custom element consumer. These are provided by the element.attachInternals() method, which returns an instance of ElementInternals. The properties and methods of ElementInternals allow control over internal features which the user agent provides to all elements.
</p>

<dl class="domintro">
	<dt>%element.`attachInternals()$m</dt>
	<dd>
`~custom要素$ %element を~targetにしている `ElementInternals$I ~objを返す。
次のいずれかに該当する場合、
例外を投出する
⇒＃
%element は`~custom要素$でない／
要素~定義を成す一部として `internals^l 特能は不能化されている／
同じ要素~上で重ねて~callされたとき
◎
Returns an ElementInternals object targeting the custom element element. Throws an exception if element is not a custom element, if the "internals" feature was disabled as part of the element definition, or if it is called twice on the same element.
</dd>
</dl>

<p>
各 `HTMLElement$I には、
それに
`付された内部特能@
がある
— それは［
~NULL ／ `ElementInternals$I ~obj
］であり，
初期~時は ~NULL とする。
◎
Each HTMLElement has an attached internals (null or an ElementInternals object), initially null.
</p>

<div class="algo">
<p>
`attachInternals()@m
~method手続きは：
◎
The attachInternals() method steps are:
</p>
<ol>
	<li>
~IF［
コレの`~is0値$el ~NEQ ~NULL
］
⇒
~THROW `NotSupportedError$E
◎
If this's is value is not null, then throw a "NotSupportedError" DOMException.
</li>
	<li>
%定義 ~LET `~custom要素~定義を検索する$( コレの`~custom要素~registry$el, コレの`名前空間$el, コレの`局所~名$el, ~NULL )
◎
Let definition be the result of looking up a custom element definition given this's custom element registry, this's namespace, this's local name, and null.
</li>
	<li>
~IF［
%定義 ~EQ ~NULL
］
⇒
~THROW `NotSupportedError$E
◎
If definition is null, then throw an "NotSupportedError" DOMException.
</li>
	<li>
~IF［
%定義 の`内部特能を不能化するか$cD ~EQ ~T
］
⇒
~THROW `NotSupportedError$E
◎
If definition's disable internals is true, then throw a "NotSupportedError" DOMException.
</li>
	<li>
~IF［
コレに`付された内部特能$ ~NEQ ~NULL
］
⇒
~THROW `NotSupportedError$E
◎
If this's attached internals is non-null, then throw an "NotSupportedError" DOMException.
</li>
	<li>
~IF［
コレの`~custom要素~状態$el ~NIN { `precustomized^l, `custom^l }
］
⇒
~THROW `NotSupportedError$E
◎
If this's custom element state is not "precustomized" or "custom", then throw a "NotSupportedError" DOMException.
</li>
	<li>
コレに`付された内部特能$ ~SET 新たな `ElementInternals$I ~instance
— その
⇒＃
`~target要素$iN ~SET コレ
◎
Set this's attached internals to a new ElementInternals instance whose target element is this.
</li>
	<li>
~RET コレに`付された内部特能$
◎
Return this's attached internals.
</li>
</ol>
</div>

				<section id="the-elementinternals-interface">
<h5 title="The ElementInternals interface">4.13.7.1. `ElementInternals^I ~interface</h5>

<p>
`ElementInternals$I ~interface用の~IDLは、
以下の各節にて定義される様々な演算, 属性を伴う：
◎
The IDL for the ElementInternals interface is as follows, with the various operations and attributes defined in the following sections:
</p>

<pre class="idl">
[Exposed=Window]
interface `ElementInternals@I {

  /* <span class="comment">
`§ ~shadow根への~access＠#shadow-root-access$
◎
Shadow root access
</span> */
  readonly attribute `ShadowRoot$I? `shadowRoot$eI;

  /* <span class="comment">
`§ ~formに所有され得る~custom要素＠#form-associated-custom-elements$
◎
Form-associated custom elements
</span> */

  undefined `setFormValue$eI(
      (`File$I or `USVString$ or `FormData$I)? %value,
      optional (`File$I or `USVString$ or `FormData$I)? %state
  );

  readonly attribute `HTMLFormElement$I? `form$eI;

  undefined `setValidity$eI(
      optional `ValidityStateFlags$I %flags = {},
      optional DOMString %message,
      optional `HTMLElement$I %anchor
  );
  readonly attribute boolean `willValidate$eI;
  readonly attribute `ValidityState$I `validity$eI;
  readonly attribute DOMString `validationMessage$eI;
  boolean `checkValidity$eI();
  boolean `reportValidity$eI();

  readonly attribute `NodeList$I `labels$eI;

  /* <span class="comment">
`~custom状態~疑似類＠#custom-state-pseudo-class$
◎
Custom state pseudo-class
</span> */
  [SameObject] readonly attribute `CustomStateSet$I `states$eI;
};

/* <span class="comment">
`§ ~accessibility意味論＠#accessibility-semantics$
◎
Accessibility semantics
</span> */
`ElementInternals$I includes `ARIAMixin$I;

dictionary `ValidityStateFlags@I {
  boolean valueMissing = false;
  boolean typeMismatch = false;
  boolean patternMismatch = false;
  boolean tooLong = false;
  boolean tooShort = false;
  boolean rangeUnderflow = false;
  boolean rangeOverflow = false;
  boolean stepMismatch = false;
  boolean badInput = false;
  boolean customError = false;
};
</pre>

<p>
各 `ElementInternals$I は、
ある`~custom要素$を指す
`~target要素@iN
を有する。
◎
Each ElementInternals has a target element, which is a custom element.
</p>

				</section>
				<section id="shadow-root-access">
<h5 title="Shadow root access">4.13.7.2. ~shadow根への~access</h5>

<dl class="domintro">
	<dt>%internals.`shadowRoot$eI</dt>
	<dd>
%internals の`~target要素$iNは［
`~shadow~host$であるならば，それ用の`~shadow根$ ／
~ELSE_ ~NULL
］を返す。
◎
Returns the ShadowRoot for internals's target element, if the target element is a shadow host, or null otherwise.
</dd>
</dl>

<div class="algo">
<p>
`shadowRoot@eI
取得子~手続きは：
◎
The shadowRoot getter steps are:
</p>
<ol>
	<li>
%~target ~LET コレの`~target要素$iN
◎
Let target be this's target element.
</li>
	<li>
~IF［
%~target は`~shadow~host$でない
］
⇒
~RET ~NULL
◎
If target is not a shadow host, then return null.
</li>
	<li>
%~shadow ~LET %~target の`~shadow根$el
◎
Let shadow be target's shadow root.
</li>
	<li>
~IF［
%~shadow の`要素の内部特能から可用か$ ~EQ ~F
］
⇒
~RET ~NULL
◎
If shadow's available to element internals is false, then return null.
</li>
	<li>
~RET %~shadow
◎
Return shadow.
</li>
</ol>
</div>

				</section>
				<section id="form-associated-custom-elements">
<h5 title="Form-associated custom elements">4.13.7.3. ~formに所有され得る~custom要素</h5>

<dl class="domintro">
	<dt>%internals.`setFormValue(value)$eI</dt>
	<dd>
%internals の`~target要素$iNの［
`状態$cF, `提出~値$cF
］とも %value に設定する。
◎
Sets both the state and submission value of internals's target element to value.
</dd>
	<dd>
%value ~EQ ~NULL
の場合、
要素は~form提出に関与しなくなる。
◎
If value is null, the element won't participate in form submission.
</dd>

	<dt>%internals.`setFormValue(value, state)$eI</dt>
	<dd>
%internals の`~target要素$iNの［
`提出~値$cF／`状態$cF
］を［
%value ／ %state
］に設定する。
◎
Sets the submission value of internals's target element to value, and its state to state.
</dd>
	<dd>
%value ~EQ ~NULL
の場合、
要素は~form提出に関与しなくなる。
◎
If value is null, the element won't participate in form submission.
</dd>

	<dt>%internals.`form$eI</dt>
	<dd>
%internals の`~target要素$iNの`~form所有者$を返す。
◎
Returns the form owner of internals's target element.
</dd>

	<dt>%internals.`setValidity(flags, message [, anchor ])$eI</dt>
	<dd>
［
%internals の`~target要素$iNは、
%flags 引数が指示する拘束に関して難ありである
］ものと~markした上で、
要素の検証~messageを %message に設定する。
◎
Marks internals's target element as suffering from the constraints indicated by the flags argument, and sets the element's validation message to message.＼
</dd>
	<dd>
%anchor も指定された場合、
~UAは，［
`~form所有者$はヤリトリありに検証された／ `reportValidity()$eI が~callされた
］とき［
%internals の`~target要素$iNの拘束についての問題を指示する
］ために，それを利用するかもしれない。
◎
If anchor is specified, the user agent might use it to indicate problems with the constraints of internals's target element when the form owner is validated interactively or reportValidity() is called.
</dd>

	<dt>%internals.`setValidity({})$eI</dt>
	<dd>
［
%internals の`~target要素$iNは、
`自身の拘束を満たして$いる
］ものと~markする。
◎
Marks internals's target element as satisfying its constraints.
</dd>

	<dt>%internals.`willValidate$eI</dt>
	<dd>
~formが提出されるとき，%internals の`~target要素$iNは［
検証されることになるならば ~T ／
~ELSE_ ~F
］を返す。
◎
Returns true if internals's target element will be validated when the form is submitted; false otherwise.
</dd>

	<dt>%internals.`validity$eI</dt>
	<dd>
%internals の`~target要素$iN用の `ValidityState$I ~objを返す。
◎
Returns the ValidityState object for internals's target element.
</dd>

	<dt>%internals.`validationMessage$eI</dt>
	<dd>
［
%internals の`~target要素$iNの妥当性が検査されたとき，利用者に示される
］ことになる，~error~messageを返す。
◎
Returns the error message that would be shown to the user if internals's target element was to be checked for validity.
</dd>

	<dt>%valid = %internals.`checkValidity()$eI</dt>
	<dd>
%internals の`~target要素$iNに妥当性の問題は［
ないならば ~T ／
あるならば ~F
］を返す。
~F を返す場合、
要素に向けて `invalid$et ~eventを発火する。
◎
Returns true if internals's target element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.
</dd>

	<dt>%valid = %internals.`reportValidity()$eI</dt>
	<dd>
%internals の`~target要素$iNに妥当性の問題は［
ないならば ~T ／
あるならば ~F
］を返す。
~F を返す場合、
要素に向けて `invalid$et ~eventを発火することに加え，
（~eventが取消されなければ）利用者に問題を報告する。
◎
Returns true if internals's target element has no validity problems; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.
</dd>

	<dt>%internals.`labels$eI</dt>
	<dd>
［
%internals の`~target要素$iNを`~label先~control$とする `label$e 要素
］すべてからなる `NodeList$I を返す。
◎
Returns a NodeList of all the label elements that internals's target element is associated with.
</dd>
</dl>

<div>
<p>
各`~formに所有され得る~custom要素$は、
`提出~値@cF,
`状態@cF
を有する：
</p>
<ul>
	<li>
どちらも，
次に挙げる いずれかの値をとる
⇒＃
~NULL ／
文字列／
`File$I ~obj／
`~entry~list$【！`~entry$fDが成す`~list$】
</li>
	<li>
どちらも，
初期~時は ~NULL とする。
</li>
	<li>
`提出~値$cFは、
~form提出~用に 1 個~以上の`~entry$fDを供するために利用される。
</li>
	<li>
`状態$cFは、
この要素~用に，~UAが利用者の入力を復旧できる情報を与える。
</li>
</ul>
◎
Each form-associated custom element has submission value. It is used to provide one or more entries on form submission. The initial value of submission value is null, and submission value can be null, a string, a File, or a list of entries.
◎
Each form-associated custom element has state. It is information with which the user agent can restore a user's input for the element. The initial value of state is null, and state can be null, a string, a File, or a list of entries.
</div>

<p>
~custom要素の作者は、
`setFormValue()$eI ~methodを利用して，要素の［
`提出~値$cF, `状態$cF
］を設定できる
— それらは~UAに通信される。
◎
The setFormValue() method is used by the custom element author to set the element's submission value and state, thus communicating these to the user agent.
</p>

<p>
`~formに所有され得る~custom要素$ %要素 に対しては，~UAは：
◎
↓</p>
<ul>
	<li class="algo">
<p>
%要素 の`状態$cFを復旧することが良案になると
— 例えば，`~naviの後＠~HTMLnav#restore-persisted-state$や再起動~後に —
予見するときには、
次を遂行してもヨイ：
</p>
		<ol>
			<li>
%状態 ~LET 復旧されることになる状態
</li>
			<li>
`~custom要素~callback反応を~enqueueする$( %要素, `formStateRestoreCallback^l, « %状態, `restore^l » )
</li>
		</ol>
◎
When the user agent believes it is a good idea to restore a form-associated custom element's state, for example after navigation or restarting the user agent, they may enqueue a custom element callback reaction with that element, callback name "formStateRestoreCallback", and « the state to be restored, "restore" ».
</li>
	<li class="algo">
<p>
~formを埋めるための支援-特能を有していて，当の特能が呼出されたときは、
次を遂行してもヨイ：
</p>
		<ol>
			<li>
%状態 ~LET ［
状態~値の履歴, 何らかの経験則
］により決定される状態~値
</li>
			<li>
`~custom要素~callback反応を~enqueueする$( %要素, `formStateRestoreCallback^l, « %状態, `autocomplete^l » )
</li>
		</ol>
◎
If the user agent has a form-filling assist feature, then when the feature is invoked, it may enqueue a custom element callback reaction with a form-associated custom element, callback name "formStateRestoreCallback", and « the state value determined by history of state value and some heuristics, "autocomplete" ».
</li>
</ul>

<p>
一般に、
`状態$cFは［
利用者により指定された情報
］であり，`提出~値$cFは［
~serverへの提出~用に相応しくなるよう，正準-化や無毒化を施した後の値
］である。
具体的には：
◎
In general, the state is information specified by a user, and the submission value is a value after canonicalization or sanitization, suitable for submission to the server. The following examples makes this concrete:
</p>

<p class="example">
`~formに所有され得る~custom要素$が在って，日付を指定するよう利用者に依頼したとする。
利用者は
"<kbd>3/15/2019</kbd>"
を指定したが，~controlは
`2019-03-15^l
を~serverへ提出するよう望む場合、
要素の
⇒＃
`状態$cFは "<kbd>3/15/2019</kbd>" になる／
`提出~値$cFは `2019-03-15^l になる
◎
Suppose that we have a form-associated custom element which asks a user to specify a date. The user specifies "3/15/2019", but the control wishes to submit "2019-03-15" to the server. "3/15/2019" would be a state of the element, and "2019-03-15" would be a submission value.
</p>

<div class="example">
<p>
既存の［
`Checkbox$st 状態にある `input$e 要素
］の挙動を模倣する~custom要素を開発しているとする。
要素の：
</p>
<ul>
	<li>
`提出~値$cFは、
次のいずれかになる
⇒＃
要素の `value^a 内容~属性の値／
文字列 `on^l
</li>
	<li>
`状態$cFは、
次のいずれかになる
⇒＃
`checked^l ／
`unchecked^l ／
`checked/indeterminate^l ／
`unchecked/indeterminate^l
</li>
</ul>
◎
Suppose you develop a custom element emulating a the behavior of the existing checkbox input type. Its submission value would be the value of its value content attribute, or the string "on". Its state would be one of "checked", "unchecked", "checked/indeterminate", or "unchecked/indeterminate".
</div>


<div class="algo">
<p>
`setFormValue(value, state)@eI
~method手続きは：
◎
The setFormValue(value, state) method steps are:
</p>
<ol>
	<li>
%要素 ~LET コレの`~target要素$iN
◎
Let element be this's target element.
</li>
	<li>
~IF［
%要素 は`~formに所有され得る~custom要素$でない
］
⇒
~THROW `NotSupportedError$E
◎
If element is not a form-associated custom element, then throw a "NotSupportedError" DOMException.
</li>
	<li>
~IF［
%value は `FormData$I ~objである
］
⇒
%value ~SET %value の`~entry~list$fDを`~cloneする$
◎
↓</li>
	<li>
%要素 の`提出~値$cF ~SET %value
◎
Set target element's submission value to value if value is not a FormData object, or to a clone of value's entry list otherwise.
</li>
	<li>
~IF［
%state ~EQ ε
］
⇒
%state ~SET %要素 の`提出~値$cF
◎
If the state argument of the function is omitted, set element's state to its submission value.
</li>
	<li>
~ELIF［
%state は `FormData$I ~objである
］
⇒
%state ~SET %state の`~entry~list$fDを`~cloneする$
◎
Otherwise, if state is a FormData object, set element's state to a clone of state's entry list.
</li>
	<li>
%要素 の`状態$cF ~SET %state
◎
Otherwise, set element's state to state.
</li>
</ol>
</div>

<hr>

<p>
各`~formに所有され得る~custom要素$は、
次に挙げるものを有する：
◎
↓</p>
<ul>
	<li>
<p>
`妥当性~flag群@cF
⇒
`ValidityStateFlags$I と同じ構造の~map。
すなわち、
その各~memberと同じ名前の~keyたちを伴う。
各~keyに対応する値は、
どれも初期~時は ~F とする†。
◎
Each form-associated custom element has validity flags named valueMissing, typeMismatch, patternMismatch, tooLong, tooShort, rangeUnderflow, rangeOverflow, stepMismatch, and customError. They are false initially.
</p>

<p class="trans-note">【
原文では，これら各~memberと同じ名前の~flagを列挙している
（加えて， `badInput^m に対応する~flagも欠落である）が、
総称し易くするため，この訳ではこの用語に代えることにする。
】【†
値 ~T は、
（各~keyの名前が示唆するとおり，）
当の~keyに対応する`妥当性~状態$に “難あり” を意味する。
】</p>
	</li>
	<li>
`検証~message@cF
⇒
文字列
— 初期~時は空~文字列とする。
◎
Each form-associated custom element has a validation message string. It is the empty string initially.
</li>
	<li>
`検証~anchor@cF
⇒
~NULL ／要素
— 初期~時は ~NULL とする。
【`拘束をヤリトリありに検証する$ときに利用される。】
◎
Each form-associated custom element has a validation anchor element. It is null initially.
</li>
</ul>

<div class="algo">
<p>
`setValidity(flags, message, anchor)@eI
~method手続きは：
◎
The setValidity(flags, message, anchor) method steps are:
</p>
<ol>
	<li>
%要素 ~LET コレの`~target要素$iN
◎
Let element be this's target element.
</li>
	<li>
~IF［
%要素 は`~formに所有され得る~custom要素$でない
］
⇒
~THROW `NotSupportedError$E
◎
If element is not a form-associated custom element, then throw a "NotSupportedError" DOMException.
</li>
	<li>
%妥当か ~LET ~T
◎
↓</li>
	<li>
%flags を成す
~EACH( %flag → %値 )
に対し
⇒
~IF［
%値 ~EQ ~T
］
⇒＃
%妥当か ~SET ~F；
~BREAK
◎
↓</li>
	<li>
~IF［
%message ~EQ ε
］
⇒
%message ~SET 空~文字列
◎
↓</li>
	<li>
~IF［
%message ~EQ 空~文字列
］~AND［
%妥当か ~EQ ~F
］
⇒
~THROW `TypeError$E
◎
If flags contains one or more true values and message is not given or is the empty string, then throw a TypeError.
</li>
	<li>
%flags を成す
~EACH( %flag → %値 )
に対し
⇒
%要素 の`妥当性~flag群$cF[ %flag ] ~SET %値
◎
For each entry flag → value of flags, set element's validity flag with the name flag to value.
</li>
	<li>
%要素 の`検証~message$cF ~SET %妥当か に応じて
⇒＃
~T ならば 空~文字列 ／
~F ならば %message
◎
Set element's validation message to the empty string if message is not given or all of element's validity flags are false, or to message otherwise.
</li>
	<li>
%要素 の`~custom妥当性~error~message$ ~SET 
%要素 の`妥当性~flag群$cF[ `customError^l ] に応じて
⇒＃
~T ならば  %要素 の`検証~message$cF ／
~F ならば 空~文字列
◎
If element's customError validity flag is true, then set element's custom validity error message to element's validation message. Otherwise, set element's custom validity error message to the empty string.
</li>
	<li>
~IF［
%anchor ~EQ ε
］
⇒
%anchor ~SET ~NULL
◎
Set element's validation anchor to null if anchor is not given.＼
</li>
	<li>
~ELIF［
%anchor は %要素 の`~shadowも含めた子孫$でない
］
⇒
~THROW `NotFoundError$E
◎
Otherwise, if anchor is not a shadow-including descendant of element, then throw a "NotFoundError" DOMException.＼
</li>
	<li>
%要素 の`検証~anchor$cF ~SET %anchor
◎
Otherwise, set element's validation anchor to anchor.
</li>
</ol>
</div>

<div class="algo">
<p>
`validationMessage@eI
取得子~手続きは：
◎
The validationMessage getter steps are:
</p>
<ol>
	<li>
%要素 ~LET コレの`~target要素$iN
◎
Let element be this's target element.
</li>
	<li>
~IF［
%要素 は`~formに所有され得る~custom要素$でない
］
⇒
~THROW `NotSupportedError$E
◎
If element is not a form-associated custom element, then throw a "NotSupportedError" DOMException.
</li>
	<li>
~RET %要素 の`検証~message$cF
◎
Return element's validation message.
</li>
</ol>
</div>

<div class="algo">
<p>
`~formに所有され得る~custom要素$用の
`~entry構築~algo@cF
は、
所与の
( 要素 %要素, `~entry~list$ %~entry~list )
に対し：
◎
The entry construction algorithm for a form-associated custom element, given an element element and an entry list entry list, consists of the following steps:
</p>
<ol>
	<li>
%提出~値 ~LET %要素 の`提出~値$cF
◎
↓</li>
	<li>
<p>
~IF［
%提出~値 は`~entry~list$【！`~entry$fDが成す`~list$】である
］
⇒＃
%~entry~list を %提出~値 で`拡張する$；
~RET
◎
If element's submission value is a list of entries, then append each item of element's submission value to entry list, and return.
</p>

<p class="note">注記：
この事例では、
~UAは `name$a 内容~属性の値を~~無視する。
各`~entry$fDの`名$fDを裁定するのは、
`~formに所有され得る~custom要素$の実装が担当する。
名は、 `name$a 属性の値とは無関係な文字列にもなり得る。
◎
In this case, user agent does not refer to the name content attribute value. An implementation of form-associated custom element is responsible to decide names of entries. They can be the name content attribute value, they can be strings based on the name content attribute value, or they can be unrelated to the name content attribute.
</p>
	</li>
	<li>
%名 ~LET ［
%要素 は `name$a 属性を有するならば その値 ／
~ELSE_ 空~文字列
］
◎
↓</li>
	<li>
~IF［
%名 ~EQ 空~文字列
］
⇒
~RET
◎
If the element does not have a name attribute specified, or its name attribute's value is the empty string, then return.
</li>
	<li>
~IF［
%提出~値 ~NEQ ~NULL
］
⇒
%~entry~list に次の結果を`付加する$
⇒
`~entryを作成する$( %名, %提出~値 )
◎
If the element's submission value is not null, create an entry with the name attribute value and the submission value, and append it to entry list.
</li>
</ol>
</div>

				</section>
				<section id="accessibility-semantics">
<h5 title="Accessibility semantics">4.13.7.4. ~accessibility意味論</h5>

<dl class="domintro">
	<dt>%internals.`role＠~ARIA1#idl-def-ariamixin-role$eI [ = %value ]</dt>
	<dd>
%internals の`~target要素$iN用の既定の~ARIA~roleを［
設定する／検索取得する
］
— それは、
~page作者が `role$a 属性を利用して上書きしない限り，
利用されることになる。
◎
Sets or retrieves the default ARIA role for internals's target element, which will be used unless the page author overrides it using the role attribute.
</dd>

	<dt>%internals.`aria*＠~ARIA1#idl-def-ariamixin-ariaactivedescendantelement$eI [ = %value ]</dt>
	<dd>
%internals の`~target要素$iN用の
各種~ARIA［
状態／~prop
］の既定の値を［
設定する／検索取得する
］（順不同）
— それは、
各種 `aria-*$a 属性を利用して上書きしない限り，
利用されることになる。
◎
Sets or retrieves various default ARIA states or property values for internals's target element, which will be used unless the page author overrides them using the aria-* attributes.
</dd>
</dl>

<p>
各`~custom要素$は、
`内部~内容~属性~map@
を有する
— それは、
`~map$であり，初期~時は空とする。
これが ~platform~accessibility~APIにどう影響iするかの情報は、
`§ ~ARIA, および~platform~accessibility~APIに関係する要件＠~HTMLdom#wai-aria$
を見よ。
◎
Each custom element has an internal content attribute map, which is a map, initially empty. See the Requirements related to ARIA and to platform accessibility APIs section for information on how this impacts platform accessibility APIs.
</p>

				</section>
				<section id="custom-state-pseudo-class">
<h5 title="Custom state pseudo-class">4.13.7.5. ~custom状態~疑似類</h5>

<dl class="domintro">
	<dt>%internals.`states$eI.add(%value)</dt>
	<dd>
文字列 %value を当の要素の`状態~集合$に追加する
— それは、
`state()$ps 疑似類を通して公開されることになる。
◎
Adds the string value to the element's states set to be exposed as a pseudo-class.
</dd>

	<dt>%internals.`states$eI.has(%value)</dt>
	<dd>
%value は当の要素の`状態~集合$内に［
在るならば ~T ／
無いならば ~F
］を返す。
◎
Returns true if value is in the element's states set, otherwise false.

</dd>

	<dt>%internals.`states$eI.delete(%value)</dt>
	<dd>
%value は当の要素の`状態~集合$内に在るならば、
それを集合から除去した上で， ~T を返す。
他の場合は ~F を返す。
◎
If the element's states set has value, then it will be removed and true will be returned. Otherwise, false will be returned.
</dd>

	<dt>%internals.`states$eI.clear()</dt>
	<dd>
当の要素の`状態~集合$からすべての値を除去する。
◎
Removes all values from the element's states set.
</dd>

	<dt>for (const %stateName of %internals.`states$eI)</dt>
	<dt>for (const %stateName of %internals.`states$eI.entries())</dt>
	<dt>for (const %stateName of %internals.`states$eI.keys())</dt>
	<dt>for (const %stateName of %internals.`states$eI.values())</dt>
	<dd>
当の要素の`状態~集合$を成すすべての値を反復する。
◎
Iterates over all values in the element's states set.
</dd>

	<dt>%internals.`states$eI.forEach(%callback)</dt>
	<dd>
当の要素の`状態~集合$を成すすべての値を［
各~値に対し %callback を一回~callする
］ことにより反復する。
◎
Iterates over all values in the element's states set by calling callback once for each value.
</dd>

	<dt>%internals.`states$eI.size</dt>
	<dd>
当の要素の`状態~集合$を成す値の個数を返す。
◎
Returns the number of values in the element's states set.
</dd>
</dl>

<p>
各`~custom要素$は
`状態~集合@
を有する
— それは、
ある `CustomStateSet$I であり，初期~時は空とする。
◎
Each custom element has a states set, which is a CustomStateSet, initially empty.
</p>

<pre class="idl">
[Exposed=Window]
interface `CustomStateSet@I {
  setlike&lt;DOMString&gt;;
};
</pre>

<div class="algo">
`states@eI
取得子~手続きは
⇒
~RET コレの`~target要素$iNの`状態~集合$
◎
The states getter steps are to return this's target element's states set.
</div>

<div class="example">
<p>
`状態~集合$が公開できるものは、
文字列~値の有無により表現される真偽-状態である。
作者は、
3 種の値をとり得る状態を公開するよう求めるなら，
3 個の排他的な真偽-状態に変換できる。
例えば， `readyState^c と呼ばれる状態が値［
`loading^l,
`interactive^l,
`complete^l
］をとり得るなら、
3 個の排他的な真偽-状態［
`loading^l,
`interactive^l,
`complete^l
］に対応付けれる：
◎
The states set can expose boolean states represented by existence/non-existence of string values. If an author wants to expose a state which can have three values, it can be converted to three exclusive boolean states. For example, a state called readyState with "loading", "interactive", and "complete" values can be mapped to three exclusive boolean states, "loading", "interactive", and "complete":
</p>

<pre class="lang-js">
/* <span class="comment">
`readyState^c を `complete^l に変更する：
◎
Change the readyState from anything to "complete".
</span> */
this._readyState = "complete";
this._internals.states.delete("loading");
this._internals.states.delete("interactive");
this._internals.states.add("complete");
</pre>
</div>

				</section>
			</section>
		</section>
</main>