Firefox 22(Nightly) で WebComponents の document.register が実装された

Firefox WebComponents

カスタム要素が作れるようになった。DOM要素は単にDOM APIを呼び出すだけの存在だったのが、独自のメソッドとかを追加できるようにったわけで、よりオブジェクト指向的にJavaScriptを書けますね！

仕様

サンプルコード

詳細は、テストコードを見たほうが良いかも。

現在は、コンテンツ上では有効になっていないので about:config 等から設定を変更して有効にした後、再起動が必要。

dom.webcomponents.enabled = true
Object.mixin = function mixin (aTarget, aSource) {
  for (var key of Object.getOwnPropertyNames(aSource)) {
    Object.defineProperty(aTarget, key, Object.getOwnPropertyDescriptor(aSource, key));
  }
  return aTarget;
});

var XElementClass = document.register("x-element", {
  // HTMLElement.prototype を [[prototype]] にもったプロトタイプ
  protottype: Object.mixin(Object.create(HTMLElement.prototype), {
    hello: function hello() {
      console.log("Hello Custom Element");
    },
  }),
  // lifeCycle は任意
  lifecycle: {
    created: function () {
      console.log(this.localName, "is created");
    },
  },
);

<!DOCTYPE html>
<html>
<body>
<!-- document.register 時に該当要素がドキュメント上にある場合、再構成される -->
<x-element>foo</x-element>
</body>
</html>

// createElement から作成できる
var xElem_1 = document.createElement("x-element");
document.body.appendChild(xElem_1);

// document.register か返すコンストラクタからも作成できる
var xElem_2 = new XElementClass();
document.body.appendChild(xElem_2);

要素名

注意点としてx-のプレフィックスが必須。これについてはWebComponents の CustomElements の要素名は "x-" で始まるべきか。に少し書いた。

雑感

出来るようになっただけで、全然便利じゃない気がする。WebComponents系は仕様も実装も揃ってないから、それまでははっきりしないけど。

個人的には以下ができるようになると良いんだけど（XBL脳）