A Polymer element that manages data binding to the window's size.

[ This description is mirrored from README.md at github.com/grumpypufferfish/window-size on 2019-05-10 ]

Published on webcomponents.org


The window-size element manages data binding to the window's size. This component will most likely be used with other polymer components.


window-size's properties are:

  • width: window's width (window.innerWidth)
  • height: window's height (window.innerHeight)

Since in most cases you can't change the size of a window in a browser via javascript (more info here), the data bindings are unidirectional, i.e. flow upward (target to host) only.

window-size is only active while it is attached to the document.


    <window-size width="{{width}}" height="{{height}}"></window-size>
      <span>Width: {{width}} px</span>
      <span>Height: {{height}} px</span>


This component is based on the new Polymer 2.0 Release Candidate. Whilst waiting for a "stable release" of Polymer 2, this component is a pre-release.


Link to this version
TestedReleased 06 April 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 1.0.0-preview