Listening children's property change notifier using prototype's listeners property in Polymer not working

Question

Why will not this work ? I am trying to use notify and listeners together. Am I missing something ?

Polymer({
  is: 'x-child',

  properties: {
    message: {
      type: String,
      value: '',
      notify: true
    }
  }
});

Polymer({
  is: 'x-dad',

  listeners: {
    'message-changed': '_onMessageReceived'
  },

  _onMessageReceived: function (e) {
    alert('child sent a message');
  }
});

scenario

var d = document.createElement('x-dad');
var c = document.createElement('x-child');
d.appendChild(c);
c.message = 'new';

Answer 1

In devguide it writes:

When the property changes, the element fires a non-bubbling DOM event to indicate those changes to interested hosts.

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#change-notification-protocol

It means that event listeners are invoked only on the x-child element, but not on its ancestors. This may be what you are missing.

Answer 2

In the scenario you provided, how is Polymer supposed to know how to bind x-dad's message property with x-child's message property?

If you declare x-child in the html, to relate the 2 items, you will have to declare something like:

<x-child message={{message}}></x-child>

As for getting your current setup to work, maybe consider something similar to what is used in Bind a value between a parent and a child element where child element is created using javascript