カスタム要素を定義しました。カスタム要素が登録済みのタイプにアップグレードされたときにのみスクリプトを実行したいと考えています。ユース ケースは、カスタム メソッドを呼び出す必要がある場合です。

私のメインのhtmlファイルは次のようになります。

カスタム要素は、次のように HTML インポートに登録されます。

私の質問は簡単です:カスタム要素がそのcustom_methodメソッドを取得した後にのみ、メインの html ファイルのスクリプトが呼び出されるようにする方法は?

エレガントなソリューションを探しています。仕様の作成者が考えたであろう何か。アーキテクチャをかなり変更してもかまいません (たとえば、必要に応じて JavaScript をメイン ファイルから別のカスタム要素に移動するなど)。

私は webcomponenetsjs の初心者で、HTMLImports を使用して別の HTML を index.html にインポートしようとしています。chrome は HTML のインポートをサポートしているので、問題はありません。しかし、Firefox で同じことを試してみると、HTML のインポートが期待どおりに機能しません。問題は、すべての HTML 要素をロードし、すべてのスクリプトをロードしてから |link rel="import"| のみをロードすることです。インポートの実行を開始します。より明確にするために、アラートが発生する順序は次のとおりです。 1.ベンダーの後 2.インポート前3.

ベンダー.js内のアラート4.test.html内のアラート。

デフォルトでは、html インポートの実行は、

1.vendor.js 内のアラート
2.ベンダーの後3.import.js の
前
4.test.html 内のアラートのようになります。

もちろん、クロムでも同じ順序で機能します。私が欠けているものについて何か助けていただければ幸いです。

カスタム要素のテストを書いています。私はWeb Component Testerを使用しているので、モックには Sinon.js を使用するとよいでしょう。

カスタム要素が<link rel="import" href="something.html">動的に追加されます。

のコンテンツをスタブするにはどうすればよいsomething.htmlですか?

HTMLImports.whenReady とはどう違いwindow.addEventListener('WebComponentsReady', function(e) {ますか？

Polymer の公式ドキュメントには次のように書かれています。

「メインの HTML ドキュメントで要素を定義するには、HTMLImports.whenReady(callback) から要素を定義します。ドキュメント内のすべてのインポートの読み込みが完了すると、コールバックが呼び出されます。」

インポートに関する Webcomponents.org の公式ドキュメントには次のように書かれています。

ネイティブ インポートでは、メイン ドキュメントのタグがインポートの読み込みをブロックします。これは、インポートがロードされ、インポートに登録されている要素がアップグレードされていることを確認するためです。このネイティブの動作はポリフィルが難しいため、HTML Imports ポリフィルは試みません。代わりに、WebComponentsReady イベントがこの動作の代わりになります。

2つの違いは何ですか？

私は最初の X-Tag アプリケーションに取り組んでおり、そのページには、「カスタム要素、Shadow DOM、テンプレート、および HTML インポート」などの Web コンポーネント API で動作することを意図していると書かれています。

テンプレートの作業を開始しましたが、HTML インポートが廃止されたため、それらをインポートするための最良のオプションは何ですか?

次の単体テストは Chrome で動作しますが (HTML インポートのネイティブ サポートにより)、PhantomJS (およびその他のブラウザー) で動作させるのに苦労しています。

インポート ('webcomponents.js/HTMLImports.min.js') をポリフィルしようとしていますが、何の効果もありません。

カルマ.conf.js

コンポーネント/so-example.html

テスト/test.spec.js

PhantomJS からのエラー

問題

ポリマーを 0.5 から 1.5 にアップグレードしたところ、紙のチェックボックスが 2 回表示されるようになりました。

進捗

polyup を実行して、ポリマー アップグレード ガイド全体を調べましたが、この問題を解決する手順はありませんでした。私は2つのことを見つけました：

1.

正しく動作している場合、htmlは次のようになります

私の場合、次のように見えました

これにより、ポリマーが紙のチェックボックスを2回処理していると思われます。ただし、再確認したところ、paper-checkbox.htmlを2回以上ロードしていません。これは、その面での私の唯一のアイデアでした。

2.

メイン コンテンツは、セクションが html インポートとして読み込まれるフライインにあります。インポートされた html の paper-checkbox がこの動作を示すことがわかりましたが、紙のチェックボックスをフライインにハードコーディングすると、正しく機能します。

質問

ポリマーが紙のチェックボックスを 2 回処理しようとする原因は何ですか? これを引き起こしている可能性のあるhtmlインポートはどうですか？

編集：

Tony の要求によるコード ダンプ。

default.html

import.js 関連関数