How to change elevation property of paper-card?

I am using polymer for my project and I want to display a shadow on paper-card whenever the user hovers it, but I can't seem to change the elevation property of paper-card. How can I do it in CSS? Also, I saw animatedShadow property in polymer elements' doc which says

Set this to true to animate the card shadow when setting a new z value.

What does it mean? I can't understand how it animates the shadow or how can I change the z value of paper-card which seems to be the elevation property, which states

The z-depth of the card, from 0-5.

Solution

There are a few ways you can accomplish this. The easiest is to override the box-shadow property on hover. We can do this with pure CSS (note: I stole this box-shadow value from the shadow.html stylesheet within the paper-styles GitHub repo):

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-card/paper-card.html" rel="import">

<hoverable-card></hoverable-card>

<dom-module id="hoverable-card">
  <style>
    paper-card:hover {
      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
                  0 1px 18px 0 rgba(0, 0, 0, 0.12),
                  0 3px 5px -1px rgba(0, 0, 0, 0.4)
    }
  </style>
  
  <template>
    <paper-card>
        Some content
    </paper-card>
  </template>
  
  <script>
    Polymer({
      is: 'hoverable-card',
    });
  </script>
</dom-module>

The next (more involved) way is to use the paper-card's mouseenter and mouseout events. We can register callbacks that will set the appropriate elevation for the card:

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-card/paper-card.html" rel="import">

<hoverable-card></hoverable-card>

<dom-module id="hoverable-card">
  <style>
  </style>
  
  <template>
    <paper-card
      animated-shadow
      id="card"
      on-mouseenter="incrementZ"
      on-mouseout="decrementZ">
        Some content
    </paper-card>
  </template>
  
  <script>
    Polymer({
      is: 'hoverable-card',
      
      incrementZ: function() {
        this.$.card.elevation = 5;
      },
      
      decrementZ: function() {
        this.$.card.elevation = 1;
      }
    });
  </script>
</dom-module>

We can also access the mixins supplied by shadow.html:

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-styles/shadow.html" rel="import">


<hoverable-card></hoverable-card>

<dom-module id="hoverable-card">
  <style>
    paper-card:hover {
      @apply(--shadow-elevation-16dp);
    }
  </style>
  
  <template>
    <paper-card>
        Some content
    </paper-card>
  </template>
  
  <script>
    Polymer({
      is: 'hoverable-card',
    });
  </script>
</dom-module>

No matter how you proceed, try to encapsulate this functionality within its own web component! Then you can re-use it whenever you please :)