HTMLCanvasElement ベースの Custom Element が作れない メモ

Custom Element spec: http://w3c.github.io/webcomponents/spec/custom/

HTMLCanvasElement ベースの Custom Element が上手く機能しないのは不具合なんだろうか? 仕様なんだろうか的メモです。

var p = Object.create(HTMLCanvasElement.prototype);

p.createdCallback = function() {
    this._ctx = this.getContext("2d"); // Uncaught TypeError: Illegal invocation
};

document.registerElement.("h-oge", { prototype: p });

(ε・﹏・)з よくわかりません。

あと、addEventLinster("click") などの基本的なイベントを使う分には問題ないのですが、addEventLinster("enterframe") などのカスタムイベントを使う方法がわかりません。

var hoge = document.createElement("h-oge");

hoge.addEventListener("enterframe", function(event) {
});

イベントの発火は、node.dispatchEvent( new Event("enterframe") ); で可能ですが、 要素に enterframe イベントが設定されているかどうかを取得する方法がありません。

おそらく node.attachedEvent や node.detachedEvent のような イベントのアタッチとデタッチをフックする仕組みがライフサイクルイベントの一部として必要なのではないでしょうか。

コンソールだと、getEventListeners(node) が使えるんですが… DOM Lv 3 にも Lv4 にもこれに該当する機能がないんですよね。

getEventListeners(event.target)

> Object {canplay: Array[1], enterframe: Array[1]}

addEventListener と、removeEventListener をフックすればこれも可能なんでしょうけど、 それはダーティなので最後の手段としては良いのですが、あまりやりたく無いのです。
クロージャが一層増えちゃうし、ずっとGCされなくなってしまうので。メモリが無駄です。

node.org_addEventListener = node.addEventListener;
node.org_removeEventListener = node.removeEventListener;

node.addEventListener = function(event, fn, capture) {
    //
    node.org_addEventListener(event, fn, capture);
};
node.removeEventListener = function(event, fn, capture) {
    //
    node.org_removeEventListener(event, fn, capture);
};