多个预定义样式或动态更改内联样式？

Question

我正在研究扑克牌的自定义元素。我使用 SVG 图像作为背景，我希望它们在套装或等级属性更改时更改背景图像。

据我所知有两种方法 - 一种是使用 "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 文件。

多个预定义样式或动态更改内联样式？

Multiple pre-defined styles or dynamically change inline style?

html

javascript

css

web-component

custom-element