You can see a live demo of this here.
I experimented a little bit with web components and Polymer in the last few days and come up with a routing schema using web components. I would like to know if there are any flaws or shortcomings you can see.
I will start with the basic usage:
demo-app.html
<!-- Create a new component-router and bind the routeData to the local route variable -->
<component-router routeData="{{route}}">
<!-- Define the route(s) this component will be activated on-->
<component-route route="component/:id:/data/:data:"></component-route>
<!-- only load component if something is routed. -->
<template if="{{route && route.id <= 2}}">
<!-- Dynamicly load a component (using HTMLImports) and pass in custom data -->
<component-loader path='component-{{route.id}}.html' data="{{route.data}}" ></component-loader>
</template>
<!-- Show error -->
<template if="{{!route || route.id > 2}}">
<p>Component {{route.id}} not found. There are only two components.</p>
</template>
</component-router>
A component-router
is to define a space where different routes (component-route
) can be defined and are rendered. Each component-router
will only be visibel if a containing route is matched.
The component-loader
is used to dynamicly load a sub component (which is another custom element) all attributes except the path
are passed to the loaded component and can be used there.
Example of a component: component-1.html
<polymer-element name="component-1" attributes="data" noscript>
<template>
<h1>Component - 1</h1>
<span>Show some data: {{data}}</span>
</template>
</polymer-element>
Some more notes:
This approach should work quite well for dynamic elements, but you probably know that it's going to introduce an overhead of network requests (and dependency resolution) for each element you try to load in. You could probably try reducing the cost of this by vulcanizing anything you're loading in with your
component-loader
.An alternative to dynamic loading would be including all of your elements in the page upfront where they are either inert or hidden and then switching what id displayed based on the route you are on. It really depends on what you're doing here though.
Some other routing efforts:
https://github.com/PolymerLabs/flatiron-director
https://github.com/ahuth/app-router
https://github.com/kvnlnt/polymerApp/tree/master/app/elements
https://github.com/polymerjs-tw/polymer-simple-router