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

【问题标题】：Polymer-Dart 1.0.0-rc.x multiple instances of custom element causes conflictPolymer-Dart 1.0.0-rc.x 自定义元素的多个实例导致冲突
【发布时间】：2023-03-26 04:50:01
【问题描述】：

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

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

由于某些原因，当我单击第二个或第三个元素中的某些内容时，会在第一个元素上执行操作。例如。我在 onClick 事件的自定义元素中添加了一个新的 DIV，但 DIV 没有添加到父元素，它被添加到另一个实例。到底是怎么回事？这是因为 Polymer 不再使用影子 DOM 了吗？至少对我来说，它似乎不再使用影子 DOM。还是这与 Polymer-Dart 有关？

【问题讨论】：

你能添加一个代码示例/repro吗？
您可能还对stackoverflow.com/questions/32703490/…感兴趣

标签： dart dart-polymer

【解决方案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。

【讨论】：

【解决方案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');

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

【讨论】：