computing dynamic styles for element wrappers in polymer 1.0

[therewasaguy]

In polymer 0.5, for every element that's added to the lenses-freeform _elements array, we could say

  <core-collapse style="top: {{el.top+35}}px; left: {{el.left}}px; transform: {{el.transform}}; width: {{el.width}}px; height: {{el.height}}px"></core-collapse>

and el.left, el.transform etc would update dynamically.

In 1.0+, we can't do that, so the suggestion is to move this to a computed function, and add a dollar sign since it's an attribute, like this:

style$="{{computeCollapseStyle(el)}}"

Unfortunately that function is only being called once, and not updating dynamically. I've run into this a few times with Polymer 1.0. I tried manually firing a dom-change event, but that does not cause computeCollapseStyle to be called. We could set the style directly when the collapse is toggled, or when the element is dragged. But it seems like we should be utilizing Polymer computed properties / observers. I looked into observing properties of arrays like the usersChanged.* example here, but it is not working.

Would it make sense to create a new Polymer element, something like "lenses-freeform-wrapper," that handles all the things we do to wrap elements for lenses-freeform? That element could then have its own observers for style etc. In the process we would be able to separate out a lot of the code from lenses-freeform that only has to do with wrapping components.