javascript - 多种预定义样式或动态更改内联样式？

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 文件。