I am porting
polymer-ui-card from JS to Dart.
A difference is that in our project (by convention) we have an additional polymer element (app-element) that contains the entire application.
In JavaScript it looks like
<body unresolved>
<div id="cards">
<polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
<polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
<polymer-ui-card></polymer-ui-card>
<polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
<polymer-ui-card></polymer-ui-card>
</div>
..
</body>
our Dart port looks like
<body unresolved>
<app-element></app-element>
</body>
app-element has the content the body tag has in JS
<polymer-element name='app-element'>
<template>
<div id="cards">
<polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
<polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
<polymer-ui-card></polymer-ui-card>
<polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
<polymer-ui-card></polymer-ui-card>
</div>
</template>
..
<polymer-element>
polymer-ui-card (same in JS and Dart)
<polymer-element name="polymer-ui-card" attributes="swipeable noCurve"
on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend="{{trackEnd}}" on-flick="{{flick}}">
The problem here is that the target for all pointer-events is the <app-element>
instead of the <polymer-ui-card>
elements.
Is this by design, or is this a problem that might be Dart only, or am I doing something wrong?