title: Polymer 1.6 and Polymer-cli, access app property from within a custom element
body: <p>Using the polymer-cli tool, and the shopping cart boilerplate as a starting point, I made a simple mock-up to illustrate the use case.</p>
  
  <p>Assume your index.html file includes "test-app.html" and the matching tag</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"&gt;
  
    &lt;title&gt;My App&lt;/title&gt;
  
    &lt;link rel="shortcut icon" sizes="32x32" href="/images/app-icon-32.png"&gt;
  
    &lt;meta name="theme-color" content="#fff"&gt;
    &lt;link rel="manifest" href="/manifest.json"&gt;
  
    &lt;script&gt;
  
      // setup Polymer options
      window.Polymer = {lazyRegister: true, dom: 'shadow'};
  
      // load webcomponents polyfills
      (function() {
        if ('registerElement' in document
            &amp;&amp; 'import' in document.createElement('link')
            &amp;&amp; 'content' in document.createElement('template')) {
          // browser has web components
        } else {
          // polyfill web components
          var e = document.createElement('script');
          e.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
          document.head.appendChild(e);
        }
      })();
  
      // load pre-caching service worker
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('/service-worker.js');
        });
      }
  
    &lt;/script&gt;
  
    &lt;!-- &lt;link rel="import" href="/src/bewi-app.html"&gt; --&gt;
    &lt;link rel="import" href="/src/test-app.html"&gt;
  
    &lt;style&gt;
  
      body {
        margin: 0;
        font-family: 'Roboto', 'Noto', sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #eee;
      }
  
    &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;span id="browser-sync-binding"&gt;&lt;/span&gt;
  
    &lt;test-app id="test"&gt;&lt;/test-app&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now, assume test-app.html containing the following (again a mere simplified copy of my-app.html):</p>
  
  <pre><code>&lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../bower_components/app-route/app-location.html"&gt;
  &lt;link rel="import" href="../bower_components/app-route/app-route.html"&gt;
  &lt;link rel="import" href="test-element.html"&gt;
  
  &lt;dom-module id="test-app"&gt;
  
    &lt;template&gt;
  
      &lt;app-location route="{{route}}"&gt;&lt;/app-location&gt;
      &lt;app-route
          route="{{route}}"
          pattern="/:page"
          data="{{routeData}}"
          tail="{{subroute}}"&gt;&lt;/app-route&gt;
  
          test-element is loaded bellow
          &lt;test-element&gt;&lt;/test-element&gt;
      &lt;div&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
  
      Polymer({
  
        is: 'test-app',
  
        properties: {
  
          page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged'
          },
          baseUrl: {
            type: String,
            value: '/'
          },
          siteUrl: {
            type: String,
            value: 'http://fqdn.local'
          }
        },
  
        observers: [
          '_routePageChanged(routeData.page)'
        ],
  
        _routePageChanged: function(page) {
          this.page = page || 'view1';
        },
  
        _pageChanged: function(page) {
          // load page import on demand.
          this.importHref(
            this.resolveUrl('my-' + page + '.html'), null, null, true);
        }
  
      });
  
    &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>Now, the test-element.html</p>
  
  <pre><code>&lt;link rel="import" href="../../bower_components/polymer/polymer.html"&gt;
  
  &lt;dom-module id="test-element"&gt;
    &lt;template&gt;
      &lt;div&gt; I am a test &lt;/div&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
    (function() {
      'use strict';
  
      Polymer({
        is: 'test-element',
        ready: function() {
          console.log('READY');
          console.log('find #test using document.querySelector', document.querySelector('#test')); // OK
          console.log('find #test .siteUrl using document.querySelector', document.querySelector('#test').siteUrl); // undefined
          console.log('find #test .siteUrl using Polymer.dom', Polymer.dom(document.querySelector('#test')).siteUrl); // undefined
          console.log('find #test .siteUrl using Polymer.dom().node', Polymer.dom(document.querySelector('#test')).node.siteUrl); // undefined
          console.log('find #test .siteUrl using Polymer.dom().properties', Polymer.dom(document.querySelector('#test')).node.properties); // {object} but, I'm guessing not the computed values of the properties
  
          // So, how may I access the #test app's "siteUrl" property from within a custom element?
        }
      });
    })();
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>So, the real question is, how may test-element access the property "siteUrl" in the main app?
  I'm planning to make this variable readOnly, and access it from other custom elements.
  I'ld prefer this approach VS passing the siteUrl as an attribute to the test-element element..</p>
  
  <p>What do you think?</p>