Inheriting from Parent Polymer Elements (Polymer 1.0)

Question

I am using Polymer 1.0. I have a Polymer dom-module:

<parent-node></parent-node>

And I am filling the node with another of my own separate Polymer dom-module:

<parent-node>
  <child-node></child-node>
</parent-node>

Now I want to set a boolean attribute on the parent-node that can make the child-nodes read and react. But as Polymer elements render from children first up to the parents last, can the child node read from the parent that it has the Boolean value of dark set to true?:

<parent-node dark>
  <child-node></child-node> <!-- Can it read from the parent? -->
</parent-node>

I was hoping to use a way with the {{dark}} binding. Can the parent publish to the children?

Another way I was thinking that I could possibly achieve this is possibly through CSS in the <child-node> dom-module template. :host is great but is there a way for me to hit the parent of :host? So it could be some like (psuedo code):

:parent[dark] :host {
   background: #000;      
}

Alternatively, is there perhaps a way in the <parent-node> to hit specific children of <content></content>. Maybe Polymer allows piercing through the container of <content> to hit specific classes or ids?

Could anyone help? My current implementation requires the parent assigning Boolean attributes to the children but I feel this totally defeats the advantages of the templating and binding abilities of Polymer...

jptknta jptknta · Accepted Answer · 2015-08-13T17:08:25

There should not be any problem creating a boolean property on each and binding them. e.g.:

<parent-node dark="{{darkValue}}>
  <child-node dark="{{darkValue}}"/>
  <div>{{darkValue}}</div>
<parent-node>

If the "dark" property on have their notify flag set to true then this will be a two way binding - a change to either will notify the other.

Here are two elements to experiment with. Activate the timer in either and the dark value toggles in both parent and child as expected.

Polymer({
  is: 'parent-node',

  properties: {
    dark: {
      type: Boolean,
      notify: true,
      observer: 'log'
    }
  },

  ready: function() {
    var me = this;
    // ACTIVATE THIS TIMER, OR THE CHILD TIMER
    //setInterval(function() {me.dark = !me.dark}, 2000);
  },

  log: function (newVal, oldVal) {
    console.log('parent', newVal);
  }
});

Polymer({
  is: 'child-node',

  properties: {
    dark: {
      type: Boolean,
      notify: true,
      observer: 'log'
    }
  },

  ready: function() {
    var me = this;
    // ACTIVATE THIS TIMER, OR THE PARENT TIMER
    setInterval(function() {me.dark = !me.dark}, 2000);
  },

  log: function (newVal, oldVal) {
    console.log('child', newVal);
  }
});

I don't think there is any simple way to notify specific children via a bindings to a single parent property. For that you may need to use a dom query to access the children you are interested in and call them directly (i.e. set their dark properties directly).

EDIT: Binding in content.

This works too:

<dom-module id="parent-node">
  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <content></content>
  </template>
</dom-module>

... and add the following to your html:

   <parent-node dark="{{darkValue}}">
          <div>dark value of content in parent-node is <span>{{darkValue}}</span></div>
   </parent-node>

The {{darkValue}} in the content of parent-node is initially blank but is subsequently updated each time the parent node toggles the dark value. So it seems that darkValue is bound to the parent-node content.

Inheriting from Parent Polymer Elements (Polymer 1.0)

1 Answers