Activating default route if no other carbon-route active - polymer

Question

Since Polymer 1.4 carbon-route is available, which can be used for navigation:
<carbon-location
route="{{route}}"
use-hash-as-path>
</carbon-location>
<carbon-route
route="{{route}}"
pattern="/tabs/:tabName"
data="{{data}}">
</carbon-route>
However, if none of the routes match when the page initially loads, then the URL is not updated when the route changes.
Is there a way to select a default route when no other route matches?
For example, in excess-route, this could be done via:
<excess-route
route="/(.*)"
redirect-to="/default"
activation-modifiers="x">
</excess-route>
It looks like there's an open issue for this, is there a good work-around?
https://github.com/PolymerElements/carbon-route/issues/68

Answer 1

Try using the new fallback-selection attribute on iron-selectables like iron-pages or paper-tabs: https://github.com/PolymerElements/iron-selector/blob/master/iron-selectable.html#L121
At time of writing this property is very new and isn't yet up on the elements guide. You may also need to do a bower update locally as well to get the new code.

Answer 2

Answering own question, the following can be used as a work-around:
...
<carbon-location
route="{{route}}"
use-hash-as-path>
</carbon-location>
<carbon-route
route="{{route}}"
pattern="/tabs/:tabName"
data="{{data}}">
</carbon-route>
<paper-tabs
selected="{{data.tabName}}"
attr-for-selected="key">
<paper-tab key="foo">Foo</paper-tab>
<paper-tab key="bar">Bar</paper-tab>
</paper-tabs>
...
Polymer({
...
properties: {
data: {
type: Object,
observer: "_onData"
}
},
_onData: function (newValue, oldValue) {
if (! newValue.tabName) {
window.location = ("" + window.location).replace(/\#.*$/, "") + "#/tabs/foo";
}
}
});