What is the exact difference between Polymer "reflectToAttribute" and "notify"?

Question

The Polymer properties object supports two different keys that I don't quite understand the difference between, reflectToAttribute and notify.

reflectToAttribute says that the attribute on the host node will change when the value changes.

notify says it makes the property available for two-way binding.

Aren't these sort of the same thing? If you have notify set to true, then is there any reason that you would still need reflectToAttribute?

Could someone explain to me exactly how these keys relate to one another? Thanks!

Kris

Answer 1

reflectToAttribute is to get the attribute added to the DOM. This way you can for example use it as selector in CSS

notify is as mentioned in your question for two-way binding.

These are two entirely different purposes.

Egmont

Answer 2

If we "reflect" a prop, it will appear in that component's element tag as such:

<component prop></component>

As mentioned, we could use the presence of that attribute to conditionally style the component in our style section: :host([prop]) div { background-color: green }

In litElement, we simply write: reflect: true in the property definition (rather than reflectToAttribute).

As you know, if we use notify: true on a child property, then changes in its value will also occur in its corresponding parent property (2-way binding).

In litElement, notify doesn't exist. Instead, to pass info back to the parent, you can dispatch a custom event in the child and listen for it in the parent.

In Polymer, I initially thought that in order to notify a parent of a change, we had to reflect the prop as an attribute, but this isn't the case.

Cockcroft