要約

  • W3C は2013年5月14日に Custom Elements の最初の公開草案を出した。2016年草案はクラス、登録簿、既存要素のアップグレードとライフサイクルのコールバックを記し、2018年の Note は内容が DOM・HTML へ移ると説明した。
  • 現行 HTML 標準では作者が CustomElementRegistry に定義を登録する。ブラウザーは対象要素を見つけてアップグレードし、接続や監視対象の属性変更などの反応を実行する。

ニュースサイトが写真、見出し、リンクを一組にするカードを何度も使いたいとする。ページごとにスクリプトが全カードを探し回る手もある。ブラウザーにカードの名前と仕事内容を登録し、必要な時にそのコードを呼んでもらう手もある。後者なら、仕事の説明書はタグ自身に結び付く。

2013年5月14日の W3C 最初の公開草案は、作者が DOM に新しい種類の要素を定義する方法を提案した。初期の仕組みは名前とプロトタイプ、ライフサイクルの呼び出しを結び付けていた。後に API の形は変わったが、ブラウザーが要素の身分を管理し、作者が振る舞いを作るという役割は見える。

2016年6月9日の W3C 作業草案では、HTMLElement を継ぐクラスを作り、customElements.define() で登録する例が示される。定義が登録される前から文書にいるタグも例に登場し、登録後に該当する要素がアップグレードされる。席だけ先にある職場へ、後から業務マニュアルが届くわけだ。

登録簿は名前を検査し、更新と反応の順番を扱う。自律的なカスタム要素の名前に入るハイフンは、作者が作るタグの名前空間を示す目印になる。作者は観察したい属性を宣言し、変化には attributeChangedCallback() で応じる。文書への接続には connectedCallback()、離脱には disconnectedCallback() がある。ブラウザーが節目を知らせ、カード作者がその時の仕事を書く。

タグは一度だけ出社するとは限らない。HTML に先に現れ、後で定義され、移動してもう一度つながる場合もある。作者のコードはその順序を受け止める必要がある。ブラウザーは登録と呼び出しを約束するが、よいカードのデザインは作者の責任だ。人事係は見出しを書いてくれない。

独立文書はその後引っ越した。2018年5月3日の W3C 作業部会 Noteは、Custom Elements の内容が DOM、HTML などの仕様へ取り込まれていると記す。W3C の刊行履歴は2013年からの道筋を残す。今は WHATWG HTML Living Standard の Custom Elements 章が登録簿、名前の検査、アップグレード、反応キューを説明する。後に加わった採用やフォームとの関係も扱うが、中心はタグの身分と働くタイミングだ。

Shadow DOM は部品の内側の木をどう組むかを扱い、Custom Elements はタグの定義と一生を扱う。一枚のニュースカードが両方を使うこともある。片方は部屋の設計図、もう片方は職員証と勤務表だ。名前の付いたタグが、やっと自分の仕事を持った。