問題タブ [html5-template]

私も教育用のウェブサイトを作っていますが、自分では理解できないエラーが発生しました。

私は次のようなテンプレートを書きました：

そして、jquery を使用してそのテンプレートを追加し、テンプレートを使用して多くの div を追加します。

tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type;しかし、それは言ったときに常にエラーを返します。これはCannot set property innerText of null、テンプレートで要素が見つからないことを意味します。

アドバイスや推奨事項。助けてください。どうもありがとう

私は Web コンポーネントを構築し (私は Javascript の専門家ではなく、これは初めてです)、それを Shadow DOM に注入しました。しかし、このテンプレートをページで複数回使用したいと考えています。コンポーネントのプライベート スコープが再利用されていることがわかりましたが、これは私が望んでいるものではありません。コンポーネントの繰り返しが必要です。

index.html

これはテンプレートの初期化とスクリプトです

my-template.html

これで、入力フィールドをクリックすると、常に「data2」が開かれます。これは、data1 コンポーネントをクリックすると、変数が data2 init によって上書きされたことを意味します:(

2 番目の html を作成して my-template2.html として登録すると、明らかにすべて機能しますが、(明らかに) これは必要ありません。

独自の init を使用して、このテンプレートを繰り返すにはどうすればよいですか? それは可能ですか？

現在のページに他の html Web ページをロードする必要があるアプリケーションに取り組んでいます。他の Web ページは独立したアプリケーションです。Shadow DOM で Web ページを読み込もうとしています。そのために、以下のコードを使用しました。ここでは、shadowRoot に test-template.html をインポートしようとします。ここでは、テンプレートを動的にレンダリングする必要があるため (ajax を使用)、テンプレート タグを使用していません。

test-template.html は次のようになります。

上記の test-template.html を現在のページにロードできますが、test-template.html 内の JavaScript が実行されていません。スクリプトを実行する方法はありますか? はいの場合は、実行例を共有してください。ありがとう。

DevTools を使用して Web アプリをデバッグしていたときに、Firefox が HTML5 テンプレート タグ内にある img の src 属性で定義された URL を要求しているのに対し、Chrome は要求していないことに気付きました。

最新バージョン (50.0) を使用しています。

これはバグですか？

以下の例: