// Imports from the Polymer framework
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

// Example of usage of Iron/Paper elements library
// This library was created by Google and is a good example of components library
// Details in Parts 7-9: Elements
import '@polymer/iron-icon/iron-icon.js';
import '@polymer/iron-icons/iron-icons.js';

// Definition of the element
// The element displays a name with a search icon. Why search? Dunno...
// For example: <my-element name="Element"></my-element>
class MyElement extends PolymerElement {
  static get template() {
    return html`
      /* Styles of my-elements.
         They are encapsulated by default
         so if spans are used inside the icon, their color stays unaffected
         Part 1: Polyfill of Shadow DOM (Shady CSS + Shady DOM) */
      <style include="iron-flex">
        :host { @apply --layout; }
        span { color: blue; }
      </style>

      <!-- The markup of my-element. Please note usage of "[[" and "]]".
           Part 3: Polyfill of HTMLTemplateElement -->
      <span>Hello, my name is [[name]]! <iron-icon icon="face"></iron-icon></span>
    `;
  }

  // Properties to control my-element
  // Part 6: Polymer property bindings
  static get properties() {
    return {
      name: {
        type: String
      }
    };
  }
}

// Custom Elements implementation. Part 2: Polyfill of Custom Elements
customElements.define(MyElement.is, MyElement);