Edit

Page

Page title:

Page body:

[45] [DFN[[RUBYB[カスタム要素]@en[custom element]]]]は、
[[著者]]がその挙動を定義する[[要素]]です。

[46] 予め[[スクリプト]]から[[カスタム要素定義]]を作成しておき、
その定義を使って[[要素]]を作成することで、
以後その[[要素]]の状態が変化した時に [[JavaScript]]
[[コールバック関数]]を実行させることができます。

* 仕様書

[REFS[
- [35] '''[CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-04-26 20:56:11 +09:00]] 版) <https://html.spec.whatwg.org/#custom-elements>'''
-- [40] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-05-14 09:55:50 +09:00]]) <https://html.spec.whatwg.org/#custom-element>
- [33] [CITE@en[DOM Standard]] ([TIME[2016-04-26 17:13:41 +09:00]] 版) <https://dom.spec.whatwg.org/#concept-element-custom-element-state>
- [44] [CITE@en[DOM Standard]] ([TIME[2016-05-12 18:40:36 +09:00]]) <https://dom.spec.whatwg.org/#concept-node-insert>
]REFS]

[HISTORY[
[32] [[Web Components]] の一部として単独の[[仕様書]]で開発が進められてきましたが、
基本的な部分が整い合意に達したとして、2016年4月、
[[HTML Standard]] に統合されました。(一部は [[DOM Standard]] に移されました。)
]HISTORY]

* 概念とプロトコル要素

[43] [[カスタム要素]]には、次の種別があります。
[FIG(middle list)[
- [[自律カスタム要素]]
- [[カスタム化組み込み要素]]
]FIG]

[[自律カスタム要素]]は、独立した[[要素]]であり、その挙動を[[著者]]が完全に実装する必要があります。
[[カスタム化組み込み要素]]は、既存の [[HTML要素]]を拡張し、
その元々の[[意味][要素の意味]]や挙動は維持したまま、
独自の拡張した動作を実装することができます。

[36] その他次のような概念があります。
[FIG(short list)[
- [[妥当なカスタム要素名]]
- [[要素の作成]]
- [[要素の格上げ]]
- [F[カスタム要素状態]]
- [[カスタム要素定義]]
- [[カスタム要素構築子]]
- [[カスタム要素反応]]
- [[カスタム要素反応群スタック]]
]FIG]

* 文書の適合性

[47] [[自律カスタム要素]]の適合性は、[[自律カスタム要素]]を参照。

[48] [[カスタム化組み込み要素]]の適合性は、拡張した元の[[HTML要素]]と変わりありません。

* 構文解析との関係

[49] [[カスタム要素]]が使われている場合、
[[構文解析器]]の動作中に[[スクリプト]]が動作することがあります。

[50] [CODE(JS)@en[document.write]] を呼び出せるという意味では[[カスタム要素]]から[[スクリプト]]を通じて[[構文解析器]]に介入できます。
しかしそれ以外に、例えば[[構文解析器]]の動作モードを直接変化させたりすることはできません。
すべての[[カスタム要素]]は、それ自体は[[スクリプト]]の動作の有無に関わらず同じように[[構文解析]]されます。

* 要素の[F[カスタム]]性

[34] [[要素]]は、[F[カスタム要素状態]]が [CODE[custom]] のとき、
[DFN[[F[[RUBYB[[[カスタム]]]@en[custom]]]]]]であるといいます [SRC[>>33]]。

[41] [DFN[[RUBYB[カスタム要素]@en[custom element]]]]は、
[F[カスタム]]である[[要素]]です。 [SRC[>>40]]

[42] 通常の[[要素]]とは違って、[[カスタム要素]]は、[[構築子][カスタム要素構築子]]や[[プロトタイプ]]を
([[利用者エージェント]]ではなく) [[著者]]が定義します。 [SRC[>>40]]

* 挿入手順群、削除手順群、属性変更手順群

[52] [[カスタム要素反応]]を参照。

* 歴史

[38] [[XBL]] 時代には、[[カスタム要素]]はありませんでした。
[[XHTML]] の世界観では、 [[XHTML]] の標準の[[語彙]]に対し、
独自の拡張は他の[[名前空間]]の[[要素]]や[[属性]]で指定することになっていましたから、
[[XML]] での利用を当初想定していた [[XBL]] も、
任意の[[名前空間]]の[[要素]]で事実上の[[カスタム要素]]を実現することを想定していたものと思われます。

;; この意味で、[[カスタム要素]]は [[XML名前空間]]の代替と言えるかもしれません。

[39] [[Web Components]] では、[[カスタム要素]]機能は、 [CITE[Custom Elements]]
[[仕様書]]として開発が進められました。いくつかの [[JavaScript]]
[[ライブラリー]]で本仕様に従ったもの、またはそれに近いものが実装された他、
[[Chrome]] でも実装が進められました。

;; [[Web Components]] も参照。

[90] [[要素名]]の制約は、[[カスタム要素名]]を参照。

[87] [CITE@en[20332: '''['''Custom''']''': Rename "custom DOM elements" to "custom elements".]], [[dglazkov]], [TIME[2013-01-18 02:52:49 +09:00]], [TIME[2024-09-08T07:05:38.000Z]] <https://github.com/WICG/webcomponents/commit/63d07e5de38a7a42b0c766e84fbd5267b5e3c75f>

[1] [CITE@en[Custom Elements]]
( ([TIME[2013-02-16 19:33:10 +09:00]] 版))
<https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html#monkeypatch-create-element>

[2] [CITE@en[Custom Elements]]
( ([TIME[2013-05-13 23:16:10 +09:00]] 版))
<http://www.w3.org/TR/2013/WD-custom-elements-20130514/>

[3] [CITE@en[Custom Elements]]
( ([TIME[2013-10-24 05:57:19 +09:00]] 版))
<http://www.w3.org/TR/2013/WD-custom-elements-20131024/>

[4] [CITE@en[Re: ''''''[''''''webcomponents'''''']'''''' Seeking status and plans]]
( ([[Dimitri Glazkov]] 著, [TIME[2013-10-03 02:58:19 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-webapps/2013OctDec/0042.html>

[5] [CITE@en[MathML and dashes in element names]]
( ([[Dimitri Glazkov]] 著, [TIME[2013-11-09 06:07:14 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-math/2013Nov/0019.html>

[6] [CITE[dglazkov/html-as-custom-elements]]
( ([TIME[2014-05-07 06:06:32 +09:00]] 版))
<https://github.com/dglazkov/html-as-custom-elements>

[7] [CITE@en[Introduction to Web Components]]
( ([TIME[2013-06-05 15:53:16 +09:00]] 版))
<http://www.w3.org/TR/2013/WD-components-intro-20130606/#custom-element-section>

[8] [CITE@en[Custom Elements]]
( ([TIME[2014-12-12 22:31:56 +09:00]] 版))
<http://www.w3.org/TR/2014/WD-custom-elements-20141216/>

[9] [CITE@en[Custom Elements - WHATWG Wiki]]
([TIME[2015-02-02 21:54:23 +09:00]] 版)
<https://wiki.whatwg.org/wiki/Custom_Elements>

[10] [CITE[IRC logs: freenode / #whatwg / 20150225]]
([TIME[2015-02-26 11:33:23 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20150225#l-280>

[80] [CITE@en[FAQ - WHATWG Wiki]], [TIME[2023-10-04T03:59:00.000Z]], [TIME[2024-10-06T07:47:44.788Z]] <https://wiki.whatwg.org/index.php?title=FAQ&oldid=9975#HTML_should_support_a_way_for_anyone_to_invent_new_elements.21>

[FIG(quote)[
[FIGCAPTION[
[11] [CITE@en[Official Google Webmaster Central Blog: Easier website development with Web Components and JSON-LD]]
([TIME[2015-04-01 01:09:39 +09:00]] 版)
<http://googlewebmastercentral.blogspot.jp/2015/03/easier-website-development-with-web.html>
]FIGCAPTION]

> JSON-LD and Web Components work really well together. The Custom Element functions as the presentation layer and the JSON-LD functions as the data layer that the custom element and search engines consume. This means you can build custom elements for any schema.org type, such as schema.org/Event and schema.org/LocalBusiness.

]FIG]

[12] [CITE@en[Bug 28547 – Remove the support for inherting from builtin subclasses of HTMLElement and SVGElement]]
([TIME[2015-04-24 12:47:43 +09:00]] 版)
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=28547>

[13] [CITE@en[Custom Elements: "createdCallback" & cloning]]
([[Anne van Kesteren]] 著, [TIME[2015-07-02 16:05:47 +09:00]] 版)
<https://lists.w3.org/Archives/Public/public-webapps/2015JulSep/0012.html>

[14] [CITE[Will any new features be tied to constructors?]]
([TIME[2015-07-03 11:56:41 +09:00]] 版)
<https://esdiscuss.org/topic/will-any-new-features-be-tied-to-constructors>

[15] [CITE@en[The key custom elements question: custom constructors?]]
([[Domenic Denicola]] 著, [TIME[2015-07-16 09:45:29 +09:00]] 版)
<https://lists.w3.org/Archives/Public/public-webapps/2015JulSep/0159.html>

[16] [CITE@en[Custom Elements: insert/remove callbacks]]
([[Anne van Kesteren]] 著, [TIME[2015-05-06 22:45:24 +09:00]] 版)
<https://lists.w3.org/Archives/Public/public-webapps/2015AprJun/0517.html>

[17] [CITE@en[Apple's updated feedback on Custom Elements and Shadow DOM]]
([[Maciej Stachowiak]] 著, [TIME[2015-07-21 10:17:24 +09:00]] 版)
<https://lists.w3.org/Archives/Public/public-webapps/2015JulSep/0204.html>

[18] [CITE[Update on standardizing shadow DOM and custom elements — Anne’s Blog]]
([TIME[2015-07-29 12:37:42 +09:00]] 版)
<https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update>

[19] [CITE@en[Custom elements "Constructor-Dmitry" baseline proposal]]
([[Domenic Denicola]] 著, [TIME[2015-08-18 07:19:58 +09:00]] 版)
<https://lists.w3.org/Archives/Public/public-webapps/2015JulSep/0304.html>

[20] [CITE@en[Apple's feedback for custom elements]]
([[Ryosuke Niwa]] 著, [TIME[2016-01-24 17:01:38 +09:00]] 版)
<https://lists.w3.org/Archives/Public/public-webapps/2016JanMar/0059.html>

[21] [CITE@en[''''''[''''''custom-elements'''''']'''''' Steps inside HTMLElement's constructor]]
([[Ryosuke Niwa]] 著, [TIME[2016-02-23 15:46:47 +09:00]] 版)
<https://lists.w3.org/Archives/Public/public-webapps/2016JanMar/0113.html>

[22] [CITE@en[Custom Elements]]
([TIME[2016-02-27 00:19:47 +09:00]] 版)
<https://www.w3.org/TR/2016/WD-custom-elements-20160226/>

[23] [CITE@en[Large custom element spec rewrite to implement some F2F decisions · w3c/webcomponents@d95392f]]
([TIME[2016-03-04 15:53:57 +09:00]] 版)
<https://github.com/w3c/webcomponents/commit/d95392f734895b2c72e1822f464dd70a22b322a4>

[24] [CITE@en[Decouple Custom Elements from HTML Imports · w3c/webcomponents@6953f9f]]
([TIME[2016-03-08 18:49:01 +09:00]] 版)
<https://github.com/w3c/webcomponents/commit/6953f9f5a36d3221407b4c6735e6ff927f8cb45f>

[30] [CITE@en[Custom Elements]] ([TIME[2016-04-08 20:17:59 +09:00]] 版) <https://w3c.github.io/webcomponents/spec/custom/>

[25] [CITE@en[Add support for custom elements · whatwg/dom@7f63535]]
([TIME[2016-04-13 22:16:46 +09:00]] 版)
<https://github.com/whatwg/dom/commit/7f63535da39a1cbf7f8f68563abc6f05f760990a>

[26] [CITE@en[Home · whatwg/dom Wiki]]
([TIME[2016-04-13 22:29:55 +09:00]] 版)
<https://github.com/whatwg/dom/wiki>

[27] [CITE@en[Editorial: update custom element cross-spec references · whatwg/dom@3536dd9]]
([TIME[2016-04-20 15:28:47 +09:00]] 版)
<https://github.com/whatwg/dom/commit/3536dd95dbc6bad216f414d34de6c6805db67e6f>

[28] [CITE@en[Add custom elements to HTML · whatwg/html@6e7eaa4]]
([TIME[2016-04-26 18:03:28 +09:00]] 版)
<https://github.com/whatwg/html/commit/6e7eaa4bd2912965fd83766f99f984f249531f3a>

[29] [CITE@en[Upstream Custom Elements by domenic · Pull Request #204 · whatwg/dom]]
([TIME[2016-04-26 18:27:38 +09:00]] 版)
<https://github.com/whatwg/dom/pull/204>

[FIG(quote)[
[FIGCAPTION[
[31] [CITE@en[Custom Elements]]
([TIME[2016-04-08 20:17:59 +09:00]] 版)
<https://w3c.github.io/webcomponents/spec/custom/>
]FIGCAPTION]

> Sections which explicitly modify existing parts of these specifications are denoted with "DOM+", "HTML+", or "Web IDL+" in their titles.

]FIG]

[37] [CITE@en[New Web Components editor]]
([[Léonie Watson]] 著, [TIME[2016-04-27 03:00:20 +09:00]] 版)
<https://lists.w3.org/Archives/Public/public-webapps/2016AprJun/0068.html>

[51] [CITE@en[Custom Elements]]
( ([TIME[2016-05-18 06:12:39 +09:00]]))
<https://www.w3.org/TR/2016/WD-custom-elements-20160517/>

[53] [CITE@en[Sync custom elements with upstream]]
( ([[domenic]]著, [TIME[2016-05-21 05:56:12 +09:00]]))
<https://github.com/w3c/webcomponents/commit/37eb6275e9d214530973d26ff5a36dff2b55b819>

[54] [CITE@en[Custom Elements]]
( ([TIME[2016-05-24 00:44:27 +09:00]]))
<https://www.w3.org/TR/2016/WD-custom-elements-20160523/>

[55] [CITE@en[Bug 150225 – Prototype custom element API]]
( ([TIME[2016-06-01 12:40:58 +09:00]]))
<https://bugs.webkit.org/show_bug.cgi?id=150225>

[56] [CITE@en[20653 – need a way for Web Components to cause new interface objects to exist dynamically]]
( ([TIME[2016-06-03 18:04:15 +09:00]]))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=20653>

[57] [CITE@en[Sync custom elements with upstream]]
( ([[domenic]]著, [TIME[2016-06-10 06:43:54 +09:00]]))
<https://github.com/w3c/webcomponents/commit/9c41e5be975027f96e6297b46a558efa1c34e696>

[58] [CITE@en[Sync custom elements with upstream]]
( ([[domenic]]著, [TIME[2016-06-22 01:45:26 +09:00]]))
<https://github.com/w3c/webcomponents/commit/d69d50c95a0d846b9926d2b7ebaad098db03c597>

[59] [CITE@en[Custom Elements]]
( ([TIME[2016-06-22 01:46:53 +09:00]]))
<https://www.w3.org/TR/2016/WD-custom-elements-20160621/>

[60] [CITE@en[Sync custom elements with upstream]]
([[domenic]]著, [TIME[2016-07-22 01:16:58 +09:00]])
<https://github.com/w3c/webcomponents/commit/466244b68ae9e7c609ea6b4fddbf35c401badfa2>

[61] [CITE@en[Custom Elements]]
([TIME[2016-07-22 01:34:51 +09:00]])
<https://www.w3.org/TR/2016/WD-custom-elements-20160721/>

[62] [CITE@en[Custom elements section contain too much tutorial-like contents · Issue #1642 · whatwg/html]]
([TIME[2016-08-11 10:46:11 +09:00]])
<https://github.com/whatwg/html/issues/1642>

[63] [CITE@en[Re: '''['''Custom Elements''']''' Should I write v1 Custom Elements in a way  backwards compatible with v0 API?]]
([[Dominic Cooney]]著, [TIME[2016-08-22 18:06:56 +09:00]])
<https://lists.w3.org/Archives/Public/public-webapps/2016JulSep/0068.html>

[64] [CITE@en[Custom Elements]]
([TIME[2016-08-30 21:36:15 +09:00]])
<https://www.w3.org/TR/2016/WD-custom-elements-20160830/>

[65] [CITE@en[Chromium Blog: Chrome 54 Beta: Custom Elements V1, BroadcastChannel, and media platform improvements]]
( ([TIME[2016-09-17 08:54:54 +09:00]]))
<https://blog.chromium.org/2016/09/chrome-54-beta-custom-elements-v1.html>

[66] [CITE@en[Custom Elements]]
([TIME[2016-10-03 03:25:51 +09:00]])
<https://www.w3.org/TR/2016/WD-custom-elements-20161002/>

[67] [CITE@en[Custom Elements]]
([TIME[2016-10-13 14:35:15 +09:00]])
<https://www.w3.org/TR/2016/WD-custom-elements-20161013/>

[68] [CITE@en[Editorial: add Brian to custom elements acknowledgments]]
([[domenic]]著, [TIME[2016-10-24 18:17:24 +09:00]])
<https://github.com/whatwg/html/commit/3c1ccfd4150fb9ac128916f892e2ac5e036ffddb>

[FIG(quote)[
[FIGCAPTION[
[69] [CITE[Release Notes for Safari Technology Preview 17 | WebKit]]
( ([TIME[2016-11-10 10:08:39 +09:00]]))
<https://webkit.org/blog/7071/release-notes-for-safari-technology-preview-17/>
]FIGCAPTION]

> Enabled Custom Elements everywhere by default (r208201)
> Changed Custom Elements reactions to have a queue per element (r207810)
> Enqueued attributeChanged and connected callbacks when upgrading a custom element (r207710)
> Custom Elements reactions are now enqueued for HTML API (r208082) and CSS OM APIs (r208176)

]FIG]

[70] [CITE@en[Add a strawman design for custom elements]]
([[rniwa]]著, [TIME[2017-11-09 05:09:23 +09:00]])
<https://github.com/w3c/webcomponents/commit/d3f89c8fd0f95f3baae6c4aecfb9730eeb2ec59b>

[71] [CITE@en[CfC: Incorporate Custom Elements into HTML]]
([[Chaals McCathie Nevile]]著, [TIME[2018-02-13 22:05:56 +09:00]])
<https://lists.w3.org/Archives/Public/public-webapps/2018JanMar/0013.html>

[72] [CITE@en[Dev edition: hide implementer-facing text for custom elements]]
([[domenic]]著, [TIME[2018-03-07 17:36:34 +09:00]])
<https://github.com/whatwg/html/commit/8bc214a1ca8956ebc62c783c6b5ee2cce6f25ac8>

[73] [CITE@en[Dev edition: hide implementer-facing text for custom elements by domenic · Pull Request #3545 · whatwg/html]]
([TIME[2018-03-09 12:53:22 +09:00]])
<https://github.com/whatwg/html/pull/3545>

[74] [CITE@en[Proposal: Allow custom elements to be in any namespace · Issue #634 · w3c/webcomponents]]
([TIME[2018-04-29 02:02:44 +09:00]])
<https://github.com/w3c/webcomponents/issues/634>

[75] [CITE@en[Deprecations and removals in Chrome 69  |  Web  |  Google Developers]]
([TIME[2018-09-15 02:56:15 +09:00]])
<https://developers.google.com/web/updates/2018/09/chrome-70-deps-rems>

[76] [CITE@en[Custom Elements]]
([TIME[2018-05-03 02:16:54 +09:00]])
<https://www.w3.org/TR/2018/NOTE-custom-elements-20180503/>

[77] [CITE@en[Fix miscounted number of custom element callbacks]]
([[Malvoz]]著, [TIME[2019-08-08 00:26:46 +09:00]])
<https://github.com/whatwg/html/commit/379f99086f38c1fe5845bbb554bf0bc6d167ed9e>

[78] [CITE@en[Fix #4822 by Malvoz · Pull Request #4825 · whatwg/html]]
([TIME[2020-05-14 14:23:32 +09:00]])
<https://github.com/whatwg/html/pull/4825>

[79] [CITE@en["A map, whose four keys are the strings "connect..." · Issue #4822 · whatwg/html]]
([TIME[2020-05-14 14:23:42 +09:00]])
<https://github.com/whatwg/html/issues/4822>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)