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

Question

I am trying to create an element of type Viewport extended from a Canvas element. I intended to fill the parent container, but this seems not very trivial.

The canvas element does not work with the style = "width: 100%; height: 100%" (it will return to the default value of 300x150 pixels if the special Canvas width and height are not set, or it will go to 100x100 pixels if I try to set these attributes are “100%.” This leaves me the task of manually setting the width of the canvas element to the size of the parent element. However, I find it difficult to figure out how to access the resize event. I could add a handler from the point of view of the user element. It seems I I do not get access to window.on.resize from anywhere in the user element. Do I have to do this outside?

Here is an example of a 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 definition of the polymer class for trying to resize, which I made, based on the proposed solution to this issue.

 @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 leads to an error where the height increases by three pixels for each resize event, even if the fields and paddings are set to zero.

Answer 1

OnResize works for me inside a custom item.

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

Answer 2

So 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); }