Polymer: passing attributes from container component to an item component

Question

I have 2 components: x-container and x-item. they have a hierarchy similar to < table > and < tr > or to < tr > and < td >... Hence x-item components are only effective when they're inside an x-container component:

<x-container>
    <x-item></x-item>
</x-container>

I want to pass an attribute value from x-container to x-item:

<x-container att="value">
    <x-item></x-item>
</x-container>

In this case I need value to be visible to x-item - is it possible? Thanks!

score 1 · Answer 1 · edited May 23 '17 at 10:33

It works out of the box if you know the structure of x-container beforehand (JSBin):

<polymer-element name="x-container" attributes="value">
  <template>
    <x-item value="{{value}}"></x-item>
  </template>
  <script>
    Polymer('x-container', {
      value : null,
      ready: function() {
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-item" attributes="value">
  <template>
    <div>x-item value:{{value}}</div>
  </template>
  <script>
    Polymer('x-item', {


    });
  </script>
</polymer-element>

<x-container value="test"></x-container>

If you want to dynamically create the relationship of x-container and x-item refer to these SO threads:

Data-binding between nested polymer elements

Using template defined in light dom inside a Polymer element

What is the best way to implement declarative collection rendering with Polymer?

Polymer: passing attributes from container component to an item component

1 Answers1