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

Question

I built a custom element which I've added three times on my website.

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

For some reasons, when I click something in the second or third element, the action is performed on the first one. E.g. I add a new DIV inside my custom element on an onClick event but the DIV is not added to the parent element, it's added to another instance. What is going on? Is this because Polymer dosent use shadow DOMs any longer? At least for me it seems like it's not using shadow DOMs anymore. Or is this Polymer-Dart related?

You might also be interested in stackoverflow.com/questions/32703490/… — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2015-09-21T19:05:02

If

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

and

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

produce different results the issue is caused by your imports. If you import dart:html without a prefix document.querySelector() is executed instead of this.documentSelector().

I always import dart:html with a prefix to avoid this confusion. With

import `dart:html` as dom;

dom.querySelector(...);

searches the document and

querySelector(...);

searches the children of the current element. See What are the different ways to look up elements in Polymer 1.0 for more details.

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

2 Answers