dartdart-polymer

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

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?

Solution

  • 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.