import { LitElement, property, html, customElement } from 'lit-element';
import { TemplateResult } from 'lit-html';

@customElement('lele-element')
export class LeleElement extends LitElement {
  @property()
  public footerText = `Lossless GmbH - 2018`;

  constructor() {
    super();

    // you have access to all kinds of things through this.
    // this.setAttribute('gotIt','true');
    
  }

  public render(): TemplateResult {
    return html`
      <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto');
        :host {
          font-family: 'Roboto', sans-serif;
          background: #FCFCFC;
          box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
          display: block;
          box-sizing: border-box;
        }
        :host([hidden]) {
          display: none;
        }
      </style>
      <slot></slot>
    `;
  }
}