Question

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

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

产生不同的结果问题是由您的导入引起的。如果您导入的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');

技术上它应该都有效。无论出于何种原因，它都没有。我也不知道为什么我的问题会投下一票。如果那些投票不好的人会快速解释他们为什么会这样做，我将非常感激。

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

2 个答案: