模板内的自定义元素高度0px

Question

我创建了一个自定义元素

当我把它放在模板中时，它的高度将是0px，而如果我将它放在模板之外则不是......

<link href="//www.polymer-project.org/0.5/components/polymer/polymer.html" rel="import">
<link href="//www.polymer-project.org/0.5/components/paper-input/paper-input-decorator.html" rel="import">

<polymer-element name="dalilak-date-picker" attributes="selectedDate">
  <template>
    <style>
      :host {
        display: block;
        
      }
    </style>
    <paper-input-decorator
      label="date picker"
      floatingLabel
      error="Please enter the date in the following format dd/mm/yyyy "
      isInvalid="{{isInvalid}}"
      >
      <input is="core-input" value="{{inputValue}}" on-input="{{inputChanged}}">
    </paper-input-decorator>
  </template>
  <script>
    Polymer('dalilak-date-picker', {
      // source: http://stackoverflow.com/a/15504877/2407522
      datePattern: /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/gm,
      inputChanged: function() {
        if (this.validateDate()) {
          this.selectedDate = this.inputValue;
          return;
        }
        this.selectedDate = null;
      },
      validateDate: function() {
        this.isInvalid = !this.inputValue.match(this.datePattern);
        return !this.isInvalid;
      }
    });
  </script>
</polymer-element>
  <template is="auto-binding">
  	<div vertical layout>
  		<dalilak-date-picker flex selectedDate="{{selectedDate}}"></dalilak-date-picker>

      <div>
        selected date is: {{selectedDate}}
      </div>
  	</div>

  </template>