問題タブ [html-imports]

2 つのカスタム要素 (v1) を含む Web コンポーネントを使用して、1 つの要素が別の要素にネストされている簡単な例を作成しました。index.html:

app-container.html:

ツールバー.html:

しかし、toolbar.htmldocument.currentScriptは app-container.html と同じであるためquerySelector('#app-toolbar')、id のテンプレートが見つかりませんapp-toolbar。この問題を解決するには？

Chrome 55 でテストされた例 (ポリフィルなし)。

Polymer Starter Kit または Polymer Shop が示すように、Polymer アプリケーションでは遅延読み込みを利用します。これは、ドロワー ベースのレイアウトがあり、アプリ シェルがドロワーのコンテンツとメイン ページのコンテンツをインポートすることを意味します。

次に、ビヘイビアーを導入し、それをカスタム要素 A および B で使用します。ここで、A はドロワーに表示され、B はメイン ページに表示されます。ブラウザ (Chrome) の警告が表示されflattenBehaviorsList、動作が見つからない場合があります。

Polymer.importHrefこれは、メイン ページの呼び出し (オプションasyncはtrue) が (カスタム要素 B の) 動作を認識し、そのインポートを HTML インポート マップに追加するために発生すると想定しています。ただし、コンテンツがインポートされる前に、ドロワーのPolymer.importHref(オプションasyncは) 呼び出しは、カスタム要素 A の動作をインポートし、HTML インポート マップからコンテンツを取得します。trueしかし、インポートが行われていないため、動作はnull.

その仮定は本当ですか？はいの場合、これは Chrome のバグですか? それとも、設計が悪いので、異なる遅延読み込みアプリ パーツで同じ動作を共有すべきではないのでしょうか?

どう思いますか？

前もって感謝します

ES6 モジュールでは、既にページにimportあるタグからモジュールへの現在のメソッドまたはパイプライン内のメソッドはありますか? <script>たとえば、2 つ<script>のタグがある場合、

疑問符の代わりにimport、2 番目のタグのステートメントに何を入れますか?<script>

明らかに、必要なタグを識別する何らかの方法が必要であるため、id属性は識別を目的としています。<script>クラスやその他の方法で行うことができますが、ID は一意である必要があります (ただし、多くのブラウザーでは最後のタグにid. ドキュメント内の位置でタグを取得することによっても実行でき<script>ます。たとえば、ここでは 2 番目のスクリプト タグを取得しているので、次のようにすることもできます。

もう 1 つ: これが HTML インポート全体で機能する場合、それも素晴らしいことです。私の本来の目的は、サイトのさまざまなページで React コンポーネントを再利用することでした。そこでは、相対パスでインポートできない可能性があり、少なくとも Webpack では、絶対パスは常にサーバーのルートに対して相対的であるとは限りません。コンピュータのルート、または少なくともウェブサーバーのルートに相対的です。

<script>ページ上の別のタグから値を直接インポートするにはどうすればよいですか?

他のコンポーネントから参照される Polymer コンポーネントがあります。何かのようなもの：

のindex.html

のcomponent-one.html

のcomponent-two.html

のsub-component.html

で 2 番目のコンポーネントを動的にロードしようとすると、問題が発生しますindex.html。

これにより例外がスローされます。

キャッチされない DOMException: 'Document' で 'registerElement' を実行できませんでした: タイプ 'sub-component' の登録に失敗しました。その名前のタイプはすでに登録されています。

これは 2 つのコンポーネントによって参照されているために発生していると思いsub-component.htmlますが、両方とも多くの紙と鉄の要素を参照しており、いずれもこのエラーを引き起こしません。

この例外を回避するにはどうすればよいですか?