Search code examples
javascripthtmlpolymerweb-componentcustom-element

Polymer "property-changed" event not fired when element property is set

I have a Polymer element (cw-app) property declared like this:

test: {
  type: String,
  notify: true,
  value: 'default test value'
}

As you can see it has a declared default value of default test value.

Initially, when the element is added to the page like this: <cw-app></cw-app> a corresponding test-changed event is being fired.

However, if I add the element and set a value for the property like this: <cw-app test="new value"></cw-app>, then no test-changed event is being fired initially.

Is this a desired behavior and has it been documented anywhere?

http://jsbin.com/xazaqozani/edit?html,console,output

Solution

  • I would say it's the expected behaviour:

    • In the first case the value of test is changed from null (no test attribute set) to "default test value" so the changed event is fired.

    • In the second case the value is set to "new value" at creation time. It's not changed so there's no changed event.

    See a discussion on Polymer issue page on GitHub:

    If you declare <x-foo id="foo" value="foo"></x-foo> the value foo will be assumed to be coming 'from above', t.i. from a user of the element. During config phase Polymer will not echo such data changes upwards. (Assuming the producer of the value/user of the element already has knowledge of this change.)

    On the other side, if you <x-foo id="bar"></x-foo> the default value will propagate upwards. For the same reasons, x-foo produced this value, and the user of x-foo has otherwise no knowledge about this. T.i. the default value is not coming from above(, but from x-foo).