How Do You Observe The Width Of An Element In Polymer?

I was wondering how it is possible to observe changes to an element's css property such as the width. I tried doing this but it didn't work. Where did I go wrong? Is it possible? &

Solution 1:

There is a certain technique abusing CSS transitions and listening for the transitionend event. There are only a very few cases where it's really required (like if you want to adjust the resolution of a webgl context after the canvas dimensions changed in any way)

Add a transition in css to make the transition event fire when width/height change.

:host {
  transition:width 0.01s, height 0.01s;
}

Listen for the event and handle whatever you want to happen

this.addEventListener("transitionend",function(e){
  this.elementWidth = this.clientWidth;
}) 

more info about implementing the technique, like polyfills you'll probably need