Observe element style changes (height) - polymer

Question

I would like to get notified any any change of the elements style changes (in my case: any change to the elements height).
I have tried to manually register an observer:
observers: [
'heightUpdated(style.height)',
],
This seems not to work (for any style properties).
I have also tried an other observer:
observers: [
'heightUpdated(clientHeight)',
],
This observer never gets called.

Answer 1

The only way i've found to observer changes to style properties of a Polymer element, is to use a MutationObserver
It can easily be set up to listen for any change to any of the .style. properties such as .style.height, but it has a lot of restrictions.
Here is one I set up earlier
Polymer({
is: "my-element",
properties: {
// Saved to the element, so you can inspect it if you want
mutationObserver: {
value: function() {
// uses the function "mutated" defined later"
var observer = new MutationObserver(this.mutated.bind(this));
observer.observe(this, {
// Only fires on attribute changes
attributes: true,
attributeOldValue: true,
// Only fires when the "style" attribute changes
attributeFilter : ['style'],
});
return observer;
},
},
height: String,
},
observers: [
'heightUpdated(height)'
],
mutated: function(mutations) {
// Change this function if you want to listen for something else instead, this is fired on all "style" changes, and you can see the changes inside the "mutations" object it provides
this.set('height', this.style.height);
},
heightUpdated: function(height) {
console.log('height', height);
}
});
It listens whenever this.style.height is set, but not when you resize the element.
Hopefully, the mutation observer will be updated with a css extension to provide better support for listening to css style changes. Until then I don't think this is the best option I can come up with.