What is best practice for handling resize events in a polymer element?

Question

I'm trying to create a "Viewport" type element extended from a Canvas element. I intended for it to fill the parent container, but that seems not very trivial.

The canvas element does not work with style="width:100%; height:100%" (it will revert to a default value of 300x150 pixels if the special Canvas width and the height attributes are not set, or it will go to 100x100 pixels if I try to set those attributes to "100%". This leaves me with the task of manually setting the width of the canvas element according to the size of the parent element. However I am at a loss when trying to figure out a way to access a resize event I could add a handler to from the perspective of the custom element. I don't seem to get access to window.on.resize from anywhere within the custom element. Do I have to do this from the outside?

Here is an example polymer element definition:

<polymer-element name="canvas-viewport">
  <template>
    <style>
      @host{
        :scope {
          margin:0px;
          padding:0px;
          display:block;
          position:relative;
          width:100%;
          height:100%;
          background:limegreen;
          overflow:visible;
          border:0;
        }
       }

      div {
        border:0;
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
      }

    </style>
<div id="container">
      <canvas width="{{wpWidth}}" height="{{wpHeight}}" id="theCanvas"></canvas>
    </div>
    </template>
  <script type="application/dart" src="canvas_viewport.dart"></script>
</polymer-element>

Here is some dart code in the accompanying polymer class definition for trying to handle the resize that I made based on a suggested solution to this question.

@override
void attached() {
  super.attached();
  viewPortContainer = shadowRoot.querySelector("#container");
  window.onResize.listen(resizecontainer);
}


void resizecontainer(Event e){
  wpWidth = viewPortContainer.clientWidth;
  wpHeight = viewPortContainer.clientHeight;
  print("resizing Width:$wpWidth , Height:$wpHeight ");    
}

However this results in a bug where the height grows by three pixels on each resize event, even though margins and paddings are set to zero.

Answer 1

OnResize works for me inside a custom element.

@override
void attached() {
  super.attached();
  window.onResize.listen((e) {
    print(e.currentTarget.innerWidth); 
  });
}

Answer 2

This is how I will achieve this in Polymer.

 connectedCallback() {
    super.connectedCallback();
    this._onResize = this.onResize.bind(this);
    window.addEventListener("resize", this._onResize);
 }

 onResize(e) {
    console.log('width', e.currentTarget.innerWidth);
 }

 disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener("resize", this._onResize);
 }