I have two web ponents defined with Polymer 1.0.0 and my question is about accessing the parent public API

<dom-module id="x-gallery">
  <template is="dom-repeat" items="{{photos}}">
    <x-photo photo="{{item}}"></x-photo>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-gallery',

    ...

    getAll: function() {
      return this.photos;
    }
  });
</script>

<dom-module id="x-photo">
  <template>
    <img src="{{photo.src}}">
  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-photo',
    properties: {
      photo: Object
    },

    ready: function() {
      // HERE ---
      // How could I access the x-gallery.getAll public method?
      // ...
    }
  });
</script>

I have two web ponents defined with Polymer 1.0.0 and my question is about accessing the parent public API

<dom-module id="x-gallery">
  <template is="dom-repeat" items="{{photos}}">
    <x-photo photo="{{item}}"></x-photo>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-gallery',

    ...

    getAll: function() {
      return this.photos;
    }
  });
</script>

<dom-module id="x-photo">
  <template>
    <img src="{{photo.src}}">
  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-photo',
    properties: {
      photo: Object
    },

    ready: function() {
      // HERE ---
      // How could I access the x-gallery.getAll public method?
      // ...
    }
  });
</script>

As you can see I wonder how you could easily access the getAll public method from the children?

I've seen some documentation referring to event based solutions (listening to the child events) but that doesn't really fit with my need. Unless you told me that the only solution available..

Any ideas?

• javascript
• polymer

• In general I'd say while not quite an anti-pattern to call parent methods from a child it's a better practice to use events to send information upwards and only call directly in parent-to-child relationships. In the example given, you are already passing the photo for x-photo using dom-repeat so there should be no need to "call back up" to the parent. The binding photo="{{item}}" will set the photo property of x-photo. – Michael Bleigh Commented Jun 1, 2015 at 22:40
• Polymer.dom(this.root).parentNode.getAll() should work, I think. – Zikes Commented Jun 2, 2015 at 2:26
• I have to agree with @MichaelBleigh, though. In a situation where a child element needs knowledge about its sibling elements, perhaps that knowledge should be distributed by the parent? That way the child elements won't need to infer anything about their environment, and can focus on doing only what they're told to do. – Zikes Commented Jun 2, 2015 at 2:30

2 Answers 2

ready: function() {
    this.domHost.getAll()
}

from documentation: http://polymer.github.io/polymer/

"domHost" is the

"element whose local dom within which this element is contained"

In this way you can access the "parent" and its functions. In my opinion it is not the right approach in Polymer framework.

I have used it, in my project, only to define callback functions to the parent.

(sorry for my bad English)

Confirmed..I have used both methods - 1. parent explicitly setting a child's property to point back to parent, and 2. the domHost. domHost is easier and better as it is built-in. In method 1, you have to make sure that the child is ready before setting the property.