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>
The
component-loader
is usingPolymer.import
. You are right about the boilerplate code for loading routes and using an extendedcomponent-loader
for that would be a good idea. I think that thecomponent-loader
could be interesting on its own.I will setup a repo and than all work regarding the
component-loader
can be gathered there.Another thing to think about is how to pass down attributes to the loaded component, do you expect the
component-loader
to have a attribute likedata
that expects an object like:which will result in the attribute 'attr' to be set to 'value' on the loaded component.