カスタム要素を入れ子にしています。私は、親カスタム要素にその子カスタム要素のプロトタイプからメソッドとプロパティを使用させたいと思います。例えば。カスタム要素*とその子要素*が初期化されたときにコールバックを取得する方法
<script>
var ChildElement = Object.create(HTMLElement.prototype);
ChildElement.getName = function() {
return "Bob";
}
document.registerElement("child-element", {
prototype: ChildElement
});
var ParentElement = Object.create(HTMLElement.prototype);
ParentElement.createdCallback = function() {
var self = this;
setTimeout(function() {
// This logs 'Bob', correctly
console.log(self.childNodes[0].getName());
}, 0);
// This explodes - getName is not defined.
console.log(self.childNodes[0].getName());
};
document.registerElement("parent-element", {
prototype: ParentElement
});
</script>
<parent-element><child-element></child-element></parent-element>
インラインで説明したように、親は子要素のプロトタイプで定義されているものを読み取ることができません。それは直ちにsetTimeoutを発生させることができます。この要素の子ノードも設定されるまで待機する必要があります。
これが原因要素の作成中にコールバックオーダーで起こる表示されます、私は何かのようだと思うどの：
- 親のプロトタイプ（のHTMLElementからParentElementに）設定されている
- 親のcreatedCallbackが と呼ばれています
- 親のattachedCallbackは子供のプロトタイプが
- 子供のcreatedCallbackはCALがある（ChildElementへのHTMLElementから）設定されている
- と呼ばれています
- つながった子供のattachedCallbackは、この時点でcreatedCallback火災が理にかなっていること
と呼ばれているが、すべてのあなたの子供が作成されたとき、私の知る限り、すべてのその火で利用可能なコールバックはありません。これは、setTimeoutを使用してページ全体のレンダリングを待つことなく、子要素のプロトタイプを使用する作成時に何かを行うことは不可能だということです。
すべての子ノードのプロトタイプも設定されている間だけ、親から聞こえるコールバックやイベントはありますか？このような構造を使うことを許す別のアプローチはありますか？ setTimeoutをトリガする以外にもできることはありますか？
カスタム要素は、他の要素コンテンツとのパラメータ化を可能にすると考えられていましたが、その要素で効果的にサポートされていないカスタム要素は効果的です。
これはおそらくPrototype not defined when accessing children on creation of custom-tagの複製と見なすことができます。しかし、その問題は、壊れた例ではあまり表現されておらず、唯一の答えは実際には解決策ではなく、実装上のバグであるようです（または、少なくとも現在のブラウザの動作ではありません）。