Polymer - simple way to access child element properties from parent element
<p>I have a simple polymer element that looks like this:</p>

<pre><code>&lt;link rel="import" href="../../bower_components/polymer/polymer.html"&gt;

&lt;dom-module id="selector-course"&gt;
  &lt;template&gt;
    &lt;style&gt;
        paper-dropdown-menu {
            padding:5px;
        }
    &lt;/style&gt;
    &lt;paper-dropdown-menu label="Course"&gt;
      &lt;paper-listbox class="dropdown-content" selected="{{selected}}" attr-for-selected="value" id="courseSelect"&gt;
        &lt;paper-item value="main"&gt;Main&lt;/paper-item&gt;
        &lt;paper-item value="soup"&gt;Soup&lt;/paper-item&gt;
        &lt;paper-item value="dessert"&gt;Dessert&lt;/paper-item&gt;
        &lt;paper-item value="appetizer"&gt;Appetizer&lt;/paper-item&gt;
      &lt;/paper-listbox&gt;
    &lt;/paper-dropdown-menu&gt;
  &lt;/template&gt;
  &lt;script&gt;
    Polymer({
        is: 'selector-course'
    });
  &lt;/script&gt;
&lt;/dom-module&gt;
</code></pre>

<p>This element is stored in a separate HTML file and then used in a couple of my other elements like this:</p>

<pre><code>&lt;link rel="import" href="components/selector-course.html"&gt;
...
&lt;selector-course selected="{{recipe.course}}"&gt;&lt;/selector-course&gt;
</code></pre>

<p>Now, within my parent elements I need to access the selected value of <code>&lt;selector-course&gt;</code></p>

<p>Right now, I have a solution that looks like this:</p>

<pre><code>this.shadowRoot.querySelector('selector-course').shadowRoot.querySelector('#courseSelect').selectedItem.getAttribute("value");
</code></pre>

<p>This works, however, this query seems absurdly complex for such a trivial task as accessing the property of an element.</p>

<p>Is there a more simple way to achieve the same thing?</p>