Issue when using Route + Polymer.dart

[sdeleuze]

Hi,

I have done a small prototype using Polymer.dart + Route lib, everything work as expected if the link is in the main HTML file, but routes do not match anymore if the link is into a Web Component.

Perhaps an issue about Window.onPopState event propagation and Shadow DOM ...

A demo of the bug is available on https://github.com/sdeleuze/polymer-dart-blog/tree/050cca531c6134f49082413d591b9e0aba535b91 Links (blue ones) on index.html are working, but those in the menu are not (they come from Blog web component).

Also have a look on Justin Fagnani answer https://groups.google.com/a/dartlang.org/d/msg/web-ui/_-2SgwldRzI/hknmXhZynDMJ

Regards, Sébastien

[sethladd]

/sub

[zboralski]

Is this still an issue?

[justinfagnani]

Unfortunately it is.

I talked to the custom elements / shadow DOM guys and they're opinion was that the browser lacked a proper way to listen to navigation events, not that the shadow DOM or event retargeting needed changing to allow us to find the original target. Another opinion was that components shouldn't be putting anchors in their shadow DOM unless they want to have a link as an implementation detail.

I don't completely disagree with these positions, but they're not that helpful for the immediate problem either. Proposing a new onNavigation API would obviously take a while, so I'm hoping to find some other workaround. One option is to not use shadow DOM in components, now that there's that option. Another is to invent a NavigationEvent that components should emit rather than relying on the MouseEvent to bubble. If that were adopted by most component authors, or at least the ones who would have embedded an anchor tag, it could work.

[sethladd]

I've been using hashes, which seems to work OK.

Inside my custom element:

<a href="#something">click me</a>

Inside my main top-level app:

    var router = new Router(useFragment: true)
      ..addHandler(new UrlPattern(r'(.*)#something'), (_) => view = 'home')

[sdeleuze]

Hi, is there any workaround or fix about this issue ? I am working on my new talk about Dart and Polymer, and I would like to avoid hashes, since we are in 2014 ;-)

[zoechi]

You might have a look at https://github.com/bwu-dart/bwu_polymer_routing but the one example I built yet uses hashes too, I guess that changing the navigation links (to not using hashes) should be enough to make it work. I'm currently working on a simple way to make the example work no matter if usePushState is used or not.

[zoechi]

I updated my examples. I added some helper methods that make it easy to create links to other routes. This works independent of the usePusState setting. So now the routing works the same no matter whether usePushState is enabled or disabled. The readme doesn't reflect these recent changes yet.

[sdeleuze]

@zoechi Thanks, I will try to use it to build the new version of my OpenSnap application, and send you some feedbacks.

[justinfagnani]

The workaround will be to use branch 0.5.0 which is a major rewrite and has helpers to fire off navigation events from custom elements contain tags rather than rely on click events. I ripped out fragment support altogether because Dart's dropping IE9 support soon enough and fragments are a poor way of navigating SPAs (though individual routes can still match with fragments if they need to).

@justinfagnani Ok thanks. I agree about dropping fragment support, it totally makes sense !

[knownasilya]

What's the status on routing with Polymer?