[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]] 版) ''' -- [40] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-05-14 09:55:50 +09:00]]) - [33] [CITE@en[DOM Standard]] ([TIME[2016-04-26 17:13:41 +09:00]] 版) - [44] [CITE@en[DOM Standard]] ([TIME[2016-05-12 18:40:36 +09:00]]) ]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]] [1] [CITE@en[Custom Elements]] ( ([TIME[2013-02-16 19:33:10 +09:00]] 版)) [2] [CITE@en[Custom Elements]] ( ([TIME[2013-05-13 23:16:10 +09:00]] 版)) [3] [CITE@en[Custom Elements]] ( ([TIME[2013-10-24 05:57:19 +09:00]] 版)) [4] [CITE@en[Re: ''''''[''''''webcomponents'''''']'''''' Seeking status and plans]] ( ([[Dimitri Glazkov]] 著, [TIME[2013-10-03 02:58:19 +09:00]] 版)) [5] [CITE@en[MathML and dashes in element names]] ( ([[Dimitri Glazkov]] 著, [TIME[2013-11-09 06:07:14 +09:00]] 版)) [6] [CITE[dglazkov/html-as-custom-elements]] ( ([TIME[2014-05-07 06:06:32 +09:00]] 版)) [7] [CITE@en[Introduction to Web Components]] ( ([TIME[2013-06-05 15:53:16 +09:00]] 版)) [8] [CITE@en[Custom Elements]] ( ([TIME[2014-12-12 22:31:56 +09:00]] 版)) [9] [CITE@en[Custom Elements - WHATWG Wiki]] ([TIME[2015-02-02 21:54:23 +09:00]] 版) [10] [CITE[IRC logs: freenode / #whatwg / 20150225]] ([TIME[2015-02-26 11:33:23 +09:00]] 版) [80] [CITE@en[FAQ - WHATWG Wiki]], [TIME[2023-10-04T03:59:00.000Z]], [TIME[2024-10-06T07:47:44.788Z]] [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]] 版) ]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]] 版) [13] [CITE@en[Custom Elements: "createdCallback" & cloning]] ([[Anne van Kesteren]] 著, [TIME[2015-07-02 16:05:47 +09:00]] 版) [14] [CITE[Will any new features be tied to constructors?]] ([TIME[2015-07-03 11:56:41 +09:00]] 版) [15] [CITE@en[The key custom elements question: custom constructors?]] ([[Domenic Denicola]] 著, [TIME[2015-07-16 09:45:29 +09:00]] 版) [16] [CITE@en[Custom Elements: insert/remove callbacks]] ([[Anne van Kesteren]] 著, [TIME[2015-05-06 22:45:24 +09:00]] 版) [17] [CITE@en[Apple's updated feedback on Custom Elements and Shadow DOM]] ([[Maciej Stachowiak]] 著, [TIME[2015-07-21 10:17:24 +09:00]] 版) [18] [CITE[Update on standardizing shadow DOM and custom elements — Anne’s Blog]] ([TIME[2015-07-29 12:37:42 +09:00]] 版) [19] [CITE@en[Custom elements "Constructor-Dmitry" baseline proposal]] ([[Domenic Denicola]] 著, [TIME[2015-08-18 07:19:58 +09:00]] 版) [20] [CITE@en[Apple's feedback for custom elements]] ([[Ryosuke Niwa]] 著, [TIME[2016-01-24 17:01:38 +09:00]] 版) [21] [CITE@en[''''''[''''''custom-elements'''''']'''''' Steps inside HTMLElement's constructor]] ([[Ryosuke Niwa]] 著, [TIME[2016-02-23 15:46:47 +09:00]] 版) [22] [CITE@en[Custom Elements]] ([TIME[2016-02-27 00:19:47 +09:00]] 版) [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]] 版) [24] [CITE@en[Decouple Custom Elements from HTML Imports · w3c/webcomponents@6953f9f]] ([TIME[2016-03-08 18:49:01 +09:00]] 版) [30] [CITE@en[Custom Elements]] ([TIME[2016-04-08 20:17:59 +09:00]] 版) [25] [CITE@en[Add support for custom elements · whatwg/dom@7f63535]] ([TIME[2016-04-13 22:16:46 +09:00]] 版) [26] [CITE@en[Home · whatwg/dom Wiki]] ([TIME[2016-04-13 22:29:55 +09:00]] 版) [27] [CITE@en[Editorial: update custom element cross-spec references · whatwg/dom@3536dd9]] ([TIME[2016-04-20 15:28:47 +09:00]] 版) [28] [CITE@en[Add custom elements to HTML · whatwg/html@6e7eaa4]] ([TIME[2016-04-26 18:03:28 +09:00]] 版) [29] [CITE@en[Upstream Custom Elements by domenic · Pull Request #204 · whatwg/dom]] ([TIME[2016-04-26 18:27:38 +09:00]] 版) [FIG(quote)[ [FIGCAPTION[ [31] [CITE@en[Custom Elements]] ([TIME[2016-04-08 20:17:59 +09:00]] 版) ]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]] 版) [51] [CITE@en[Custom Elements]] ( ([TIME[2016-05-18 06:12:39 +09:00]])) [53] [CITE@en[Sync custom elements with upstream]] ( ([[domenic]]著, [TIME[2016-05-21 05:56:12 +09:00]])) [54] [CITE@en[Custom Elements]] ( ([TIME[2016-05-24 00:44:27 +09:00]])) [55] [CITE@en[Bug 150225 – Prototype custom element API]] ( ([TIME[2016-06-01 12:40:58 +09:00]])) [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]])) [57] [CITE@en[Sync custom elements with upstream]] ( ([[domenic]]著, [TIME[2016-06-10 06:43:54 +09:00]])) [58] [CITE@en[Sync custom elements with upstream]] ( ([[domenic]]著, [TIME[2016-06-22 01:45:26 +09:00]])) [59] [CITE@en[Custom Elements]] ( ([TIME[2016-06-22 01:46:53 +09:00]])) [60] [CITE@en[Sync custom elements with upstream]] ([[domenic]]著, [TIME[2016-07-22 01:16:58 +09:00]]) [61] [CITE@en[Custom Elements]] ([TIME[2016-07-22 01:34:51 +09:00]]) [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]]) [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]]) [64] [CITE@en[Custom Elements]] ([TIME[2016-08-30 21:36:15 +09:00]]) [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]])) [66] [CITE@en[Custom Elements]] ([TIME[2016-10-03 03:25:51 +09:00]]) [67] [CITE@en[Custom Elements]] ([TIME[2016-10-13 14:35:15 +09:00]]) [68] [CITE@en[Editorial: add Brian to custom elements acknowledgments]] ([[domenic]]著, [TIME[2016-10-24 18:17:24 +09:00]]) [FIG(quote)[ [FIGCAPTION[ [69] [CITE[Release Notes for Safari Technology Preview 17 | WebKit]] ( ([TIME[2016-11-10 10:08:39 +09:00]])) ]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]]) [71] [CITE@en[CfC: Incorporate Custom Elements into HTML]] ([[Chaals McCathie Nevile]]著, [TIME[2018-02-13 22:05:56 +09:00]]) [72] [CITE@en[Dev edition: hide implementer-facing text for custom elements]] ([[domenic]]著, [TIME[2018-03-07 17:36:34 +09:00]]) [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]]) [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]]) [75] [CITE@en[Deprecations and removals in Chrome 69  |  Web  |  Google Developers]] ([TIME[2018-09-15 02:56:15 +09:00]]) [76] [CITE@en[Custom Elements]] ([TIME[2018-05-03 02:16:54 +09:00]]) [77] [CITE@en[Fix miscounted number of custom element callbacks]] ([[Malvoz]]著, [TIME[2019-08-08 00:26:46 +09:00]]) [78] [CITE@en[Fix #4822 by Malvoz · Pull Request #4825 · whatwg/html]] ([TIME[2020-05-14 14:23:32 +09:00]]) [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]])