問題タブ [polymer-2.x]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Polymer 2.x: ES6 Web コンポーネントで外部 JS ライブラリをラップする
Polymer 2.0 を使用して、progressbar.js ライブラリを ES6 Web コンポーネント内にラップしようとしています。
次のエラー メッセージが表示されます。
console.errorrender-status.html:54
Uncaught TypeError: ProgressBar.SemiCircle は
HTMLElement.animateCircle (progress-bar.html:108) の HTMLElement のコンストラクタで はありません
。(progress-bar.html:85) callMethod
(render-status.html:51)
で runQueue (render-status.html:42)
で render-status.html:29
これは、Polymer 要素内にラップしようとしている次のコードの動作中の JSFiddleです。
src/progress-bar.html src/progressbar-js.htmlpolymer - Polymer 2 の動的マージ テンプレート
ツリー ビューやマルチ リスト ビュー (2 つのリスト間で項目を移動する) など、JSON オブジェクト コレクションをレンダリングする一般的な Web コンポーネントを構築しようとしています。個々のアイテムのプレゼンテーションを含むテンプレートが再利用のためにコンポーネントに渡される、iron-list で使用されるパターンをコピーしたいと思います。
たとえば、次の Web コンポーネント テンプレートがあるとします。
そしてこの使用法：
Polymer.Templatize.templatize API を使用してテンプレートを読み込み、新しいインスタンスを作成/スタンプし、DOM API を使用してそれらを一緒に追加し、Web コンポーネントのシャドウ DOM に追加します。
テンプレートのコンテンツにアクセスし、それらを結合し、新しいテンプレートを作成してインポートし、必要に応じて複製します。
多くの逆境の後、#1 をうまく実装できましたが、#2 を実装できませんでした。それが私の質問の動機です。#2 は、結果としてスタンプされたインスタンスをマージするよりもテンプレートを一度マージする方が簡単であり、このアプローチが dom-repeat のようなネストされたテンプレートを再利用できる唯一の方法であるように思われるため、より魅力的です。
私の主な障害は、Polymer またはおそらくそのポリフィルが読み込まれると、テンプレートが不透明になり、Polymer のテンプレート化機能でしか利用できないことです。たとえば、次のコードは Polymer をインポートしなくても問題なく動作します。
Polymer の外部では、template.content DOMFragment に子があり、innerHTML が設定されています。ただし、Polymer が使用されると、template.content には子がなく、innerHTML は空になります。これにより、DOM API を使用して、使用可能なテンプレートをブレンドする新しいテンプレートを作成することができなくなります。
おそらく、設計上、標準の HTML メカニズムを使用してテンプレートをインポートすることがうまくいかなかったのでしょう。Polymer で実行時にテンプレートを動的に作成/マージする別の方法はありますか? 繰り返しますが、私の主な動機は、すべての機能を再実装することなく、テンプレートにネストされた dom-if および dom-repeat Web コンポーネントを再利用したいということです。