All geek questions in one place

A polymer is an easy way to access the properties of children from a parent.

I have a simple polymer element that looks like this:

<link rel="import" href="../../bower_components/polymer/polymer.html"> <dom-module id="selector-course"> <template> <style> paper-dropdown-menu { padding:5px; } </style> <paper-dropdown-menu label="Course"> <paper-listbox class="dropdown-content" selected="{{selected}}" attr-for-selected="value" id="courseSelect"> <paper-item value="main">Main</paper-item> <paper-item value="soup">Soup</paper-item> <paper-item value="dessert">Dessert</paper-item> <paper-item value="appetizer">Appetizer</paper-item> </paper-listbox> </paper-dropdown-menu> </template> <script> Polymer({ is: 'selector-course' }); </script> </dom-module>

This element is stored in a separate HTML file and then used in several of my other elements:

 <link rel="import" href="components/selector-course.html"> ... <selector-course selected="{{recipe.course}}"></selector-course>

Now, in my parent elements, I need to access the selected <selector-course> value

Now I have a solution that looks like this:

 this.shadowRoot.querySelector('selector-course').shadowRoot.querySelector('#courseSelect').selectedItem.getAttribute("value");

This works, however, this query seems absurdly complicated for such a trivial task as accessing an element property.

Is there an easier way to achieve the same?

+5
source share
2 answers

Oh no, this is a very bad idea. Access to internal elements is very fragile because it requires that the parent elements have deep knowledge (pun intended) about the details of the implementation of <selector-course> . Not to mention that your method will not work with Shady DOM.

In your case, you can simply add a notification to your element

 Polymer({ is: 'selector-course', properties: { selected: { notify: true } } });

To select a value to bind external data, you can use the @ a1626 method.

 var selected = this.$('selector-course').selected; 

 Polymer({ is: 'selector-course', properties: { selected: { notify: true } } }); 
 <!DOCTYPE html> <html> <head> <base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="polymer/polymer.html" rel="import"/> <link href="paper-dropdown-menu/paper-dropdown-menu.html" rel="import"/> <link href="paper-listbox/paper-listbox.html" rel="import"/> <link href="paper-item/paper-item.html" rel="import"/> </head> <body> <template is="dom-bind"> <selector-course selected="{{selection}}"></selector-course> <div>{{selection}}</div> </template> <dom-module id="selector-course"> <template> <style> paper-dropdown-menu { padding:5px; } </style> <paper-dropdown-menu label="Course"> <paper-listbox class="dropdown-content" selected="{{selected}}" attr-for-selected="value" id="courseSelect"> <paper-item value="main">Main</paper-item> <paper-item value="soup">Soup</paper-item> <paper-item value="dessert">Dessert</paper-item> <paper-item value="appetizer">Appetizer</paper-item> </paper-listbox> </paper-dropdown-menu> </template> </dom-module> </body> </html>
+5
source

Your parent element seems to be a Polymer element in and of itself since you used snapping. In this case, you can access the property using

 this.$.<id of child>.<property name>

Or if your element is inside dom-if or dom-repeat

 this.$$(<querySelector>).<property name>

You can check it out here.

In your case it will be

 <selector-course selected="{{selected}}" id="mySelector"></selector-course>

In javascript

 this.$.selected
+4
source

Source: https://habr.com/ru/post/1258245/

More articles:


All Articles