複数の事前定義されたスタイルまたは動的にインラインスタイルを変更しますか？

Question

私はカードをプレイするためのカスタム要素に取り組んでいます。背景としてSVG画像を使用し、スーツやランクの属性が変更されるたびに背景画像を変更したいと考えています。私の知る限りこれを行うには2つの方法があります知っているよう

- 1「はattributeChangedCallback」メソッドを使用することです：

static get observedAttributes() {return ["suit", "rank"];} 
attributeChangedCallback(name, oldValue, newValue) { 
    this.style.backgroundImage = `url(...)`; 
} 

を、もう一方はCSS属性セレクタの多くを持っていることです。

:host([suit="clubs"][rank="4"]) { 
    background-image: url(...); 
} 
:host([suit="clubs"][rank="5"]) { 
    background-image: url(...); 
} 
... 

どちらも動作しますが、JSの方法ではインラインスタイルが追加されています。私はこれを防止したいと思いますし、CSSの方法は非常に大きいです。 私は考慮する必要がある巨大なパフォーマンスの違いはありますか？

Answer 1

パフォーマンスに大きな違いはありません。また、同じページに数百または数千のカスタム要素がある場合に限ります。

後者の場合、両方のソリューションを動作条件でテストしてから、より良いものを選択する必要があります。

これが当てはまらない場合は、あなたのプロジェクトの管理方法によって異なります：CSSとJSファイルを管理するチームと同じチームかどうか。