PolymerJS: How to properly use paper-material

Question

I'd like to use the shadow animation of paper-material on a card and when I use something like this, it works:

<template is="dom-bind" id="todoapp">
    <style>
    </style>

    <section on-click="tapAction">
        <paper-material elevation="0" animated>  
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus molestiae quibusdam officiis libero quia ad, unde, assumenda totam soluta modi ullam cumque rem porro tempore ratione doloribus ab delectus optio. Excepturi voluptates mollitia, soluta at, obcaecati magni doloremque aperiam quisquam, esse ipsa voluptas commodi, quis.
        </paper-material>
    </section>
</template>

<script>
    todoapp.tapAction = function (e) {
        var target = e.target;

        if (!target.down) {
            target.elevation += 1;

            if (target.elevation === 1) {
                target.down = true;
            }
        } else {
            target.elevation -= 1;
            if (target.elevation === 0) {
                target.down = false;
            }
        }
    };
</script>

But as soon as my paper-material element has another element in it, it refuses to work:

<template is="dom-bind" id="todoapp">
    <style>
    </style>

    <section on-click="tapAction">
        <paper-material elevation="0" animated>  
            <h1>Doesn't work</h1>
        </paper-material>
    </section>
</template>

The only difference is that I used an h1 element in the 2nd example. Then the animation just does not work.

I tried adding a plunker, but for some reason I haven't managed to make it work, because It must confuse some of the necessary imports. Can someone recommend a code editor, that fits for polymer?

And would it be possible to put all my code inside of the paper-material element?

Answer 1

In the first case the target is the paper-material element and in the second case, target is h1 . You might want to assign id to the paper material element and operate on that.

<template is="dom-bind" id="todoapp">
    <style>
    </style>

    <section on-click="tapAction">
        <paper-material elevation="0" animated id="material">  
            <h1>Doesn't work</h1>
        </paper-material>
    </section>
</template>

And in the script

<script>
    todoapp.tapAction = function (e) {
        var target = todoapp.$.material;

        if (!target.down) {
            target.elevation += 1;

            if (target.elevation === 1) {
                target.down = true;
            }
        } else {
            target.elevation -= 1;
            if (target.elevation === 0) {
                target.down = false;
            }
        }
    };
</script>

Working plunker: http://plnkr.co/edit/hma9wJrlW4lNrW7Qwi4n?p=preview