カスタム要素 (HTML)

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

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

仕様書

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

概念とプロトコル要素

[43] カスタム要素には、次の種別があります。

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

[36] その他次のような概念があります。

文書の適合性

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

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

構文解析との関係

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

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

要素のカスタム性

[34] 要素は、カスタム要素状態が custom のとき、カスタム (custom) であるといいます >>33。

[41] カスタム要素 (custom element) は、カスタムである要素です。 >>40

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

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

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

歴史

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

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

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

Web Components も参照。

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

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

[1] Custom Elements ( (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] Custom Elements ( (2013-05-13 23:16:10 +09:00 版)) http://www.w3.org/TR/2013/WD-custom-elements-20130514/

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

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

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

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

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

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

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

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

[80] FAQ - WHATWG Wiki, 2023-10-04T03:59:00.000Z, 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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[31] Custom Elements (2016-04-08 20:17:59 +09:00 版) https://w3c.github.io/webcomponents/spec/custom/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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