Polymer 使用同一聚合物自定义元素的多个实例

我在使用polymer（1.3.1）定义自定义元素时遇到了一个问题，该元素是门户webapp的svg按钮

下面是我的自定义元素的代码：

聚合物({
是：‘门户按钮’，
特性：{
文本：字符串，
url:String，
src:String
}
});

我认为您的问题在于模式是全局的，而不是影子根的范围。我用shadydom和本机shadowroot都试过了，结果是一样的

下面是一个解决Chrome和Firefox即时问题的局部解决方案：为每个模式创建一个唯一的ID：

<pattern id="logo-{{id}}" width="100%" height="100%" viewBox="0 0 135 133">
  <image id="buttonlogo" width="135" height="133" xlink:href="#dummy" xlink:href$="{{src}}" />
</pattern>

你可以让它更优雅一点，但这会让你工作起来

这是一个局部的解决方法，因为如果您重新使用ID，您将回到交换图像的初始问题

如果希望避免这种情况，可以定义一个单独的模式库，由ID标识（如图标的

iron iconset svg

does）。或者，作为一个更简单的解决方案，您可以从SVG文件名计算一个唯一的ID

---

希望这能有所帮助。

非常感谢您的帮助，至少这不是一个沉重的“修补程序”：），您认为我应该在Polymer Github存储库上打开一个问题吗？我设法在不使用Polymer的情况下复制了这个问题（或一个相近的变体），只使用通用web组件API。在咨询了Chrome团队中的一些人之后，我认为这是一个Chrome bug，我已经在这里存档了：。

<polygon points="140,31 60,31 20,100 60,169 140,169 180,100" fill$="[[_computeFill('#logo', id)]]" />

_computeFill: function(name, id) {
  return 'url('+ name + '-' + id + ')';
}