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文件的团队相同。

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

1 个答案: