web component - How to structure a Polymer SPA? -

i'm new polymer 1.0.

i whole "everything element" philosophy but, extent? how structure theses elements together?

tl;dr: there equivalent main() function polymer , webcomponents in general ? if , should , should ?

i @ examples, demos , projects see how should work, because polymer new (especially v1.0), have hard time finding non-trivial examples.

long version

i how use polymer create elements. i'm hitting roadbloack when want interface them. structure shoud use make components talk between them.

coming angular background have relatively precise view of should go where. example: data contained within scopes accessible controllers, directives , html elements , can use services pull data different part of app.

in polymer don't boundaries of data. not in component outside of it, lives , if component can access it. simple drawing me lot. there no such thing explained in polymer docs, because it's broader polymer.

to give insights on problem came across:

1. i set spa based on polymer starter kit
2. i wanted wire firebase firebase-element

3. i created own element use <firebase-auth>:

   <link rel="import" href="../../bower_components/polymer/polymer.html"> <link rel="import" href="../../bower_components/firebase-element/firebase-auth.html">  <dom-module id="my-login">   <template>     <firebase-auth id="firebaselogin"       user="{{user}}"       location="https://my-project.firebaseio.com"       provider="facebook"       on-error="_errorhandler"       on-login="_loginhandler"></firebase-auth>      <button on-tap="login">login facebook</button>     <button on-tap="logout">logout</button>   </template> </dom-module> <script> polymer({   is: 'my-login',   properties: {     successredirect: string   },   _errorhandler: function(e){     console.log(e.detail);   },   _loginhandler: function(e){     if(this.successredirect){       // how can tell pagejs redirect me ?       app.route = this.successredirect;     }   } }); </script> 

basically how tell pagejs (my routing library) redirect app page after successful login ? pagejs config lives in it's own routing.html file , don't understand how piece of this.

i hope abe understand broad question , me.

thanks

short answer: event listeners. place event listener on router. have login handler fire event on router. router pick event , redirect.

... _loginhandler: function(e){   if(this.successredirect){     // how can tell pagejs redirect me ?     var router = document.queryselector('router');     router.dispatchevent(new event('redirect', {redirecturl: this.successredirect});     app.route = this.successredirect;   } } ... 

then in router:

connectedcallback() {   this.addeventlistener('redirect', function(event) {     var url = event.redirecturl;     // redirect using router's api.   }); }