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="{{s.name}}"></core-item>
</template>
</core-menu>
</paper-dropdown>
</paper-menu-button>
So, in my javascript, I'm trying to grab the currently selected {{s.name}} 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
app.shadowRoot.querySelector('#userselection').selected.value
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
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.
index.html
<!DOCTYPE html>
<html>
<head>
<title>pastries</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="my-pastries.html">
</head>
<body>
<my-pastries pastries="[{'name':'Croissant'},{'name':'Donut'},{'name':'Pretzel'}]"></my-pastries>
</body>
<script>
// 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(e.detail.name);// Donut
});
</script>
</html>
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">
<template>
<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}}">{{pastry.name}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</template>
<script>
Polymer({
pastries: [],
// 1. function to trigger fire method
setSelectedValue : function(e,detail,sender){
// get templateInstance' context to have access to the model(pastry)
var pastry = e.target.templateInstance.model.pastry;
// 2. fire dispatches pastry-selected event that the element patriesTemplate has subscribed for in index.html
this.fire('pastry-selected',pastry);
}
});
</script>
</polymer-element>
Hope it helps.
source to share