How to get the selected value of a polymer element

I know there are quite a few examples when accessing variables in the shadow DOM using javascript, however, after many combinations, I still cannot get the value of the currently selected name in the following example, which is a main menu wrapped in a paper dropdown menu wrapped in a "Paper-menu" button (wrapped in a toolbar).

<paper-menu-button halign="right">
  <paper-icon-button icon="social:person"></paper-icon-button>
     <paper-dropdown class="dropdown" halign="right">
        <core-menu id="userselection" class="menu" selected="1" selectedItem="{{userName}}">
            <template repeat="{{s in users}}">
                <core-item label="{{}}"></core-item>


So, in my javascript, I'm trying to grab the currently selected {{}} value.

My javascript file starts with the following:

var app = document.querySelector('#app');


I've tried things like:

this.$.userselection.selected.value, and
app.$.userselection.selected.value, and
this.shadowRoot.querySelector('#userselection').selected.value, and
app.$.userselection.selected.value; and


None of them work.

The fourth in the list (for example) throws this error: "Uncaught TypeError: Unable to read property 'userelection' from undefined"


source to share

1 answer

Accessing html elements that are in the shadow area, outside of the resin template, is tricky and definitely more limited than accessing elements without a shadow. Also, there is no need to do this because there are methods to access some of the variables / values ​​that are inside the polymer definition tag template (dom shadow area) from outside, without using dom query methods.

To do this, you need a few things:

  • a function that is defined in a polymer template and is triggered when a list item is selected (e.g. core / document)
  • Polymer fire is a method of communicating with the outside world, as with other polymer templates.
  • and using addEventListener to make the element subscribe to specific events that can be dispatched by any polymeric templates.


<!DOCTYPE html>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="my-pastries.html">
    <my-pastries pastries="[{'name':'Croissant'},{'name':'Donut'},{'name':'Pretzel'}]"></my-pastries>
    // in index.html full access is granted when accessing dom elements also defined within index.html so querySelector works here
    var patriesTemplate = document.querySelector('my-pastries');
    // 3. patriesTemplate subscribes for it own event pastry-selected occurring within it template definition
    patriesTemplate.addEventListener('pastry-selected', function(e) {
        // e.detail holds the pastry that is passed to fire method
        console.log(;// Donut


Polymer template (my-pastries.html):

<link rel="import" href="bower_components/polymer/polymer.html">
<link href="bower_components/paper-button/paper-button.html" rel="import">
<link href="bower_components/paper-dropdown/paper-dropdown.html" rel="import">
<link href="bower_components/paper-icon-button/paper-icon-button.html" rel="import">
<link href="bower_components/paper-item/paper-item.html" rel="import">
<link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
<polymer-element name="my-pastries" attributes="pastries">
        <paper-menu-button label="Colored">
        <paper-icon-button icon="menu" class="colored"></paper-icon-button>
        <paper-dropdown class="dropdown colored">
          <core-menu class="menu">
            <template repeat="{{pastry in pastries}}">
              <paper-item on-click="{{setSelectedValue}}">{{}}</paper-item>
        pastries: [],
        // 1. function to trigger fire method
        setSelectedValue : function(e,detail,sender){
          // get templateInstance' context to have access to the model(pastry)
          var pastry =;
          // 2. fire dispatches pastry-selected event that the element patriesTemplate has subscribed for in index.html


Hope it helps.



All Articles