聚合物-Dart 1.0.0-rc.x自定义元素的多个实例导致冲突

Question

我构建了一个自定义元素，我在我的网站上添加了三次。

<custom-element id="t1"></custom-element>
<custom-element id="t2"></custom-element>
<custom-element id="t3"></custom-element>

由于某些原因，当我单击第二个或第三个元素中的某个元素时，将对第一个元素执行操作。例如，我在onClick事件上的自定义元素中添加了一个新的DIV，但是DIV没有添加到父元素，而是添加到另一个实例中。怎么一回事？这是因为聚合物剂量不再使用阴影DOMs了吗？至少对我来说，它似乎不再使用影子王国了。还是这和聚合物-Dart有关？

Answer 1

如果

_outerCircle = querySelector('#outer-circle');
_innerCircle = querySelector('#inner-circle');
_more = querySelector('#more');
_bulletPrefab = querySelector('#bullet-prefab');

和

_outerCircle = this.querySelector('#outer-circle');
_innerCircle = this.querySelector('#inner-circle');
_more = this.querySelector('#more');
_bulletPrefab = this.querySelector('#bullet-prefab');

产生不同的结果这个问题是由你的进口引起的。如果导入没有前缀的dart:html，则执行document.querySelector()而不是this.documentSelector()。

为了避免这种混淆，我总是导入带有前缀的dart:html。使用

import `dart:html` as dom;

dom.querySelector(...);

搜索文档和

querySelector(...);

搜索当前元素的子元素。有关更多详细信息，请参阅What are the different ways to look up elements in Polymer 1.0。

Answer 2

我修好了窃听器。

在这里，不起作用的代码：

_outerCircle = querySelector('#outer-circle');
_innerCircle = querySelector('#inner-circle');
_more = querySelector('#more');
_bulletPrefab = querySelector('#bullet-prefab');

在这里，代码是：

_outerCircle = this.querySelector('#outer-circle');
_innerCircle = this.querySelector('#inner-circle');
_more = this.querySelector('#more');
_bulletPrefab = this.querySelector('#bullet-prefab');