Kirill G. - little dive into Polymer

my-el-0.html

<link rel="import"
      href="../bower_components/polymer/polymer.html">
<link rel="import"
      href="../bower_components/iron-collapse/iron-collapse.html">
<link rel="import"
      href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="my-el-3.html">

<dom-module id="my-el-0">

  <template>
    <style>

      .collapse-content {
        padding: 15px;
        border: 1px solid #dedede;
      }

      .shadow {
        display: inline-block;
        margin: 5px;
        padding: 35px;
      }

      .shadow-2dp {
      @apply(--shadow-elevation-2dp);
      }

      .shadow-3dp {
      @apply(--shadow-elevation-3dp);
      }

      .shadow-4dp {
      @apply(--shadow-elevation-4dp);
      }

      .shadow-6dp {
      @apply(--shadow-elevation-6dp);
      }

      .shadow-8dp {
      @apply(--shadow-elevation-8dp);
      }

      .shadow-16dp {
      @apply(--shadow-elevation-16dp);
      }

    </style>

    <my-el-3></my-el-3>

    <button on-click="toggle">toggle collapse</button>
    <iron-collapse id="collapse" class="shadow-2dp">
      <div class="collapse-content">

        <section id="shadow">
          <h2>styles</h2>
          <div class="shadow shadow-2dp">2dp</div>
          <div class="shadow shadow-3dp">3dp</div>
          <div class="shadow shadow-4dp">4dp</div>
          <div class="shadow shadow-6dp">6dp</div>
          <div class="shadow shadow-8dp">8dp</div>
          <div class="shadow shadow-16dp">16dp</div>
        </section>

      </div>
    </iron-collapse>
    <br/><br/><br/>


  </template>

  <script>
    Polymer({
      is: "my-el-0",
      toggle: function() {
        this.$.collapse.toggle();
      }
    });
  </script>

</dom-module>