0

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?

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567

1 Answers1

1

Because of event retargeting it's no longer possible to talk about the target of an event without context.

Where the event listener is registered determines the scope of the DOM nodes that are identified on the event object.

If you put event listeners on <app-element> it will always be the target, because it has no children in the document scope.

Scott Miles
  • 11,025
  • 27
  • 32
  • As shown in my code, the event listener is on `polymer-ui-card` but `polymer-ui-card` doesn't receive any of these events (event handlers are not called). When I put the `on-xxx` event markup on `app-element`, `app-element` event handlers are called. Click works fine, this seems only to be an issue with pointer events. Maybe this is only an issue with Polymer.dart but before filing a bug I would like to know if this is somehow by design or if this should work. – Günter Zöchbauer Mar 24 '14 at 10:03
  • I have the same issue with polymer-ui-toggle-button. `on-click` works everywhere but `on-tap` only works when `polymer-ui-toggle-button` is not inside another polymer-element. – Günter Zöchbauer Mar 24 '14 at 10:04
  • Sounds like an issue with Polymer.dart. Composing elements inside of other elements / shadow-dom should not effect event targetting. – Scott Miles Mar 24 '14 at 16:49