7

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 a couple of my other elements like this:

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

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

Right 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 complex for such a trivial task as accessing the property of an element.

Is there a more simple way to achieve the same thing?

2 Answers 2

6

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

In your case you could simply adding a notifying property to your element

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

To select it's value outside data binding you can use the method @a1626 mentions

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>

1
  • 1
    Neato. Exactly what I was looking for. The only problem was that I had to move {{recipe.course}} to a separate property, as two-way binding naturally didn't work if recipe property was empty. Oct 15, 2016 at 9:26
6

Your parent element seems to be a Polymer element in itself as you have used binding. In that case you can access property using

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

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

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

You can check it out here

In your case it'll be

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

In javascript

this.$.selected
6
  • This is not a good advice, because it requires the consumer to be aware about element's internals. Web component should only be used with properties/attributes and events. Oct 15, 2016 at 8:53
  • 1
    @TomaszPluskiewicz i've added code snippet to explain my answer better. Do you still feel the same about my answer?
    – a1626
    Oct 15, 2016 at 9:00
  • Not any more. I misinterpreted your intention. However, I do think that it only solves part of the problem. The other is that the element in question doesn't actually have a selected property Oct 15, 2016 at 9:08
  • 1
    It does but notify is not set to true as property is not mentioned in properties object in the constructor
    – a1626
    Oct 15, 2016 at 12:16
  • 1
    i doubt that. But it is extensively used in elements created by Polymer
    – a1626
    Oct 15, 2016 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.