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

Question

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

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

由于某些原因，当我单击第二个或第三个元素中的某个内容时，该操作会在第一个元素上执行。例如。我在 onClick 事件的自定义元素中添加了一个新的 DIV，但 DIV 未添加到父元素，而是添加到另一个实例。到底是怎么回事？这是因为 Polymer dosent 不再使用影子 DOM 了吗？至少对我来说，它似乎不再使用影子 DOM。或者这与 Polymer-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');

从技术上讲，它应该都有效。无论出于何种原因，它都没有。我也不知道为什么我的问题有反对票。如果投反对票的人能在评论中快速解释他们这样做的原因，我将不胜感激。

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');

产生不同的结果问题是由您的导入引起的。如果您导入不带前缀的 dart:html，则执行 document.querySelector() 而不是 this.documentSelector()。

我总是导入带有前缀的 dart:html 以避免这种混淆。有

import `dart:html` as dom;

dom.querySelector(...);

搜索文档并

querySelector(...);

搜索当前元素的子元素。有关详细信息，请参阅。

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

Polymer-Dart 1.0.0-rc.x multiple instances of custom element causes conflict

dart

dart-polymer