title: Element.clientWidth / .clientHeight in polymer 1.0 / leaflet 0.7.3
body: <p>Leaflet normally requires a ... with a defined height as its container in normal DOM.  I would like to replicate that in a custom element. </p>
  
  <p>The question is: how do I get the first child content element of the custom element to have a defined height, width as reported by Element.clientHeight, Element.clientWidth, which are used by Leaflet?  </p>
  
  <p>I am trying to build a custom element using Polymer 1.0 + leaflet 0.7.3.  I realize that leaflet's use of the DOM is likely going to be an issue to be managed, however I am having problems getting the leaflet container set up such that a valid map can be created in the first place.  I think it is because leaflet uses Element.clientHeight /.clientWidth to generate the extent for which it requests tiles.  </p>
  
  <p>I have set up a plunker here: <a href="http://plnkr.co/edit/uELMbapeApmp8MBfomfr?p=info" rel="nofollow">http://plnkr.co/edit/uELMbapeApmp8MBfomfr?p=info</a>. </p>
  
  <pre><code>  console.log(this.localName + '#' + this.id + ' was attached');
    console.log("getComputedStyle("+this.localName+").height/width: " + window.getComputedStyle(this).height+"/"+ window.getComputedStyle(this).width);
    console.log(this.localName + "this.clientHeight/Width: "+this.clientHeight+ "/"+this.clientWidth);
    this.map = L.map(this.$.map, {
      center: new L.LatLng(this.getAttribute('lat'), this.getAttribute('lon')),
      zoom: this.getAttribute('zoom')
    });
    console.log("map center: "+this.map.getCenter());
    var west = this.map.getBounds().getWest(),
        south = this.map.getBounds().getSouth(),
        east = this.map.getBounds().getEast(),
        north = this.map.getBounds().getNorth();
  
    if (west === east || south === north) {
      console.log('ERROR: BAD EXTENT');
    }
  </code></pre>
  
  <p>If you reveal the console, it should log the extent that is calculated when the map is first set  up.  The weird thing is that if I run that locally, and put a breakpoint on the first line of my-map.html's attached callback (the first console.log, above), and step through it, the extent is calculated differently (correctly). If there is no breakpoint, the extent is calculated to have a height of 0, and the error is logged.</p>
  
  <p>I have tried: </p>
  
  <p><code>&lt;template&gt;&lt;div id="map"&gt;&lt;/div&gt;&lt;/template&gt;</code>
  <code>&lt;template&gt;&lt;div id="map"&gt;&lt;content&gt;&lt;/content&gt;&lt;/div&gt;&lt;/template&gt;</code></p>
  
  <p>and of course, no content in the template at all. </p>