title: Load different components on tab change
body: <p>In the context of an SPA I want to have 3 different 'views' (for want of a better word). The first one is a set of filters that can be applied to large list of restaurants, the second one is a listing of filtered restaurants, and the third one plots locations on a map.</p>
  
  <p>All the demos I can find so far basically just show different content in the same template when you switch tabs, whereas I want to use very different template and content on each one (<a href="https://github.com/Polymer/docs/blob/master/0.5/elements/demo-tabs.html" rel="nofollow">https://github.com/Polymer/docs/blob/master/0.5/elements/demo-tabs.html</a> is the closest I've found so far).</p>
  
  <p>Based on the input in the comments, I now have</p>
  
  <pre><code>&lt;body unresolved&gt;
      &lt;core-scaffold&gt;
          &lt;core-header-panel&gt;
              &lt;core-toolbar&gt;
                  &lt;text-span&gt;
                      AF Mobile
                  &lt;/text-span&gt;
                  &lt;paper-input&gt;&lt;/paper-input&gt;
              &lt;/core-toolbar&gt;
              &lt;core-toolbar&gt;
                  &lt;paper-tabs id="tabs" selected="list" self-end&gt;
                      &lt;paper-tab name="criteria"&gt;Criteria&lt;/paper-tab&gt;
                      &lt;paper-tab name="list"&gt;List&lt;/paper-tab&gt;
                      &lt;paper-tab name="map"&gt;Map&lt;/paper-tab&gt;
                  &lt;/paper-tabs&gt;
              &lt;/core-toolbar&gt;
              &lt;core-pages selected="list" valueattr="hash"&gt;
                  &lt;div hash="list" class="container" layout vertical center&gt;
                      &lt;resto-list show="all"&gt;&lt;/resto-list&gt; 
                  &lt;/div&gt;
                  &lt;div id="mapHolder" hash="map"&gt;
                      &lt;google-map latitude="37.77493" longitude="-122.41942"&gt;&lt;/google-map&gt;
                  &lt;/div&gt;
              &lt;/core-pages&gt;
          &lt;/core-header-panel&gt;
  
      &lt;/core-scaffold&gt;
  
  &lt;script&gt;
      var tabs = document.querySelector('paper-tabs');
      var pages = document.querySelector('core-pages');
  
      tabs.addEventListener('core-select', function() {
          console.log("Selected: " + tabs.selected);
          pages.selected = tabs.selected;
      });
  
  &lt;/script&gt;
  </code></pre>