shadow-dom - JS と Shadow DOM の CSS

Question

Web コンポーネントは、スタイルのカプセル化にシャドウ DOM を使用します。仕様から、シャドウ ルート内のスタイルはローカルにスコープされていることがわかります。同じ Web コンポーネントを複数回インスタンス化すると、メモリにどのような影響がありますか? 例: カスタム ボタン Web コンポーネントを 10 回インスタンス化します。

例

#Shadow-root
<style>
.outer {
  border: 2px solid brown;
  border-radius: 1em;
  background: red;
  font-size: 20pt;
  width: 12em;
  height: 7em;
  text-align: center;
}
.inner {
  color: white;
  font-family: sans-serif;
  padding: 0.5em;
}
.name {
  color: black;
  background: white;
  font-family: "Marker Felt", cursive;
  font-size: 45pt;
  padding-top: 0.2em;
}
</style>
<div/>

style.css をインポートするか、上記のようにインラインで配置します。カスタム要素には props があり、その props に基づいてコンポーネントの動作が変化し続ける場合があります。このようなコンポーネントが 50 回繰り返されると、インライン スタイルも 50 回繰り返されます。ブラウザーはインスタンス間で最適化を行いますか?

スタイルが重複している場合、js の css はカプセル化のためのシャドウ DOM よりも優れたソリューションではありませんか? 適切なjss生成プラグインを使用して、dom全体で使用されるcssを実際に最適化できます。