Polymer 1.x: paper-fab elevation not working?

In this jsBin, I'm trying to add a paper-fab to my element.

I expect to see a shadow corresponding to the elevation property. But instead I see no shadow. All the elevations seem to have the same shadow (implied z-depth).

Is the problem with my code or the element?

http://jsbin.com/corisahoqi/edit?html,output

<!doctype html>
<head>
  <meta charset="utf-8">
  <!---- >
  <base href="https://polygit.org/components/">
  <!---- >
  Toggle below/above as backup when server is down
  <!---->
  <base href="https://polygit2.appspot.com/components/">
  <!---->
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-fab/paper-fab.html" rel="import">
  <link href="iron-icons/iron-icons.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    paper-fab {
      margin: 15px;
    }
  </style>
  <paper-fab icon="add" elevation="5"></paper-fab>
  <paper-fab icon="add" elevation="4"></paper-fab>
  <paper-fab icon="add" elevation="3"></paper-fab>
  <paper-fab icon="add" elevation="2"></paper-fab>
  <paper-fab icon="add" elevation="1"></paper-fab>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Solution

Looks to me like a problem with the element. In the documentation, it sounds as if it could be used the way you intend.

The z-depth of this element, from 0-5. Setting to 0 will remove the shadow, and each increasing number greater than 0 will be "deeper" than the last

But then elevation property is read-only, so setting it has no effect.