4

次のようにカスタム要素を作成すると

document.register('bar-foo', { prototype: { .... } }); // or document.registerElement

さて、この後、その要素のプロトタイプに何かを追加したいと思います。

たとえば、「div」要素を使用してこれを行うことができます。

HTMLDivElement.prototype.bar = function() {};
document.createElement('div').bar();

カスタム要素 'bar-foo' でそれを行うにはどうすればよいですか?

4

3 に答える 3

2

まず、これはplatform.jsを使用していないとまったく機能しませんが、使用している場合は、 registerElement を呼び出す前にカスタム API をバインドする必要があります。

var prototype = Object.create(HTMLElement.prototype);
prototype.createdCallback = function() {
  ...
};
prototype.mycall = function() {
  console.log(this.shadowRoot.innerHTML);
};
document.registerElement('my-type', { prototype: prototype });

その後、これを行うことができます：

<my-type>100</my-type>
<script>
  document.getElementById('foo').mycall();
</script>

次の 2 つの点に注意してください。

1) https://api.dartlang.org/apidocs/channels/be/dartdoc-viewer/dart-dom-html.HtmlDocument#id_registerElementに従って、 registerElement 呼び出しは値を返しません。Platform.js はこれに準拠しています。戻り値がある場合は使用しないでください (例: クロム)。

2) platform.js 0.4.0 の時点で、一部のブラウザーは registerElement の呼び出しをサポートし、プロトタイプへの呼び出しをさかのぼって追加します。これは特にIE10ではサポートされていません。

于 2014-08-29T08:57:43.313 に答える
2

カスタム要素を Chrome に実装したので、これに精通しています。(FWIWdocument.registerは に改名されましdocument.registerElementた。)

後でカスタム要素のプロトタイプに何かを追加するには、最初にプロトタイプ オブジェクトへの参照が必要です。

あなたの質問では、DIV のコンストラクターを介してプロトタイプにアクセスしますHTMLDivElement.prototype。カスタム要素でも同様のパターンを使用できます。カスタム要素のコンストラクターは、registerElement から返されます。参照を保存することで、後でプロトタイプにアクセスするために使用できます。

BarFoo = document.registerElement('bar-foo', ...);

// later
BarFoo.prototype.foo = ...

(仕様が生成されたコンストラクターを呼び出して、を使用して要素を作成する、返されたオブジェクトを使用することもできますnew BarFoo()。)

参照をグローバル オブジェクト (ウィンドウ) に保存することは理にかなっています。これは、HTMLDivElement などの組み込み要素が機能する方法だからですが、そうする必要はありません。

仕様を開発する際に、window でこのコンストラクタへの参照を自動的に設定することを検討しましたが、魔法と名前の汚染が少ない方が良いと判断しました。また、タグ名を渡して正しいコンストラクターを取得できるオブジェクトを追加することも検討しました。カスタム要素だけでなく、組み込み要素でも機能するようにしたいと考えていました。残念なことに、その提案は、標準の議論リストで長く生き残ることはできませんでした。

あなたが望むことをする他の方法があります。たとえば、生成されたコンストラクターへの参照を保存する代わりに、プロトタイプへの参照を直接保存できます。または、カスタム要素のインスタンスがある場合は、Object.getPrototypeOf(elem)またはelem.__proto__を使用してプロトタイプ オブジェクトを取得できます。

チッ！

于 2014-01-27T22:53:28.530 に答える