Host vs Target in Polymer

Question

I'm trying to understand host and target (and element) in the following context taken from the Polymer Path and Polymer Data Flow documentation.

Consider the following diagram:

Now consider the following statement (from the same documentation):

"When two elements in the local DOM are bound to the same property data appears to flow from one element to the other, but this flow is mediated by the host."

So far, so good. Then it goes on to say:

"A change made by one element propagates up to the host, then the host propagates the change down to the second element."

The first part: "A change made by one element propagates up to the host..." Does this mean that a change to the first element propagates to its own host first? And does "element" actually mean the element's data properties?

The second part "then the host propagates the change down to the second element." Are we propagating down to the second element's data properties? It's extra confusing here as there is only one element or data object that is shared between the two ehhh elements??

I'm thinking that the change made in the first element's data property goes to its own host first and then the first host propagates the change back down to the second element's data element (which so happens to be the first element's data object as well).

Answer 1

<parent-el>
  <user-profile primary-address="{{addr}}"></user-profile>
  <address-card address="{{addr}}"></address-card>
</parent-el>

If either element changes addr (the child elements can use whatever name they want), the change will be propagated to the parent and then to the other element.

If either binding used [[addr]] instead, changes would only propagate from parent to child.

Note that both child elements should have notify: true set on the relevant property (primaryAddress or address) so that the parent is notified of changes and the two-way binding is fully setup.

Also note that this listens for the object to change as a whole only. To listen for changes to sub-properties e.g. addr.street the parent should add an observer. For more info on that see complex observers.