「同じタイプのウェブコンポーネント間でスタイルを共有する」

Question

正しく理解すれば、ウェブコンポーネントのインスタンスを作成することは、シャドウルートを作成し、マークアップをコピーすることで合計することができます。

var Template = document.querySelector('#myTemplate'); 
var TemplateClone = document.importNode(Template.content,true); 
TargetElement.appendChild(TemplateClone); 

もちろん、テンプレートにCSSタグがスタイルタグに含まれている場合は、それらもコピーされます。したがって、Webコンポーネントの内部マークアップに属するスコープのあるスタイルを持つことができます。

質問：私は非常に同じWebコンポーネントの インスタンスのトンを作成するときに、スタイルがちょうど コピーされ、再利用されていないよう

1. それは、任意のパフォーマンスに影響がありますか？
2. 同じWebコンポーネントの の複数のインスタンスにわたってスタイルノードを共有する方法はありますか？

Answer 1

パフォーマンスに影響はありますか。

はい、ブラウザに実装されているCSSエンジンのインスタンス数によって異なります。すべてのユースケースをテストし、スピードとメモリ消費を考慮する必要があります。

同じWebコンポーネントの複数のインスタンス間でスタイルノードを共有する方法はありますか？

はい、@import urllike in this SO questionを使用できます。または、シャドーDOMを使用せず、グローバルCSSスタイルのみを使用することもできます。