dees-section-fullheight.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../dees-style-shared/dees-style-shared.html">
<!--
`dees-section-fullheight`
a fullheight section

@demo demo/index.html
-->

<dom-module id="dees-section-fullheight">
  <template>
    <style include="dees-style-shared">
       :host {
        display: block;
        background-image: url(https://images.unsplash.com/photo-1440557653082-e8e186733eeb);
        background-size: cover;
        background-position: center;
        width: 100%;
        min-height: var(--host-height);
        overflow: auto;
      }
    </style>
    <slot></slot>
  </template>

  <script>
    class deesSectionFullheight extends Polymer.Element {
      static get is() { return 'dees-section-fullheight'; }
      static get properties() {
        return {
          height: {
            type: Number,
            value: undefined
          }
        };
      }
      ready() {
        super.ready()
        let elementHeight = window.innerHeight
        this.updateStyles({
          "--host-height": elementHeight.toString() + 'px'
        })
        return elementHeight
      }
    }

    window.customElements.define(deesSectionFullheight.is, deesSectionFullheight);
  </script>
</dom-module>