Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">

</head>


<body class="">

    <dom-module id="recipe-layout">
        <template>
            <style is="custom-style">
                paper-scroll-header-panel {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    /* background for toolbar when it is at its full size */
                    --paper-scroll-header-panel-full-header: {
                        background-color: blue;
                    };
                    /* background for toolbar when it is condensed */
                    --paper-scroll-header-panel-condensed-header: {
                        background-color: #00bcd4;
                    };
                }
                paper-toolbar {
                    height: 400px;
                    background-color: transparent;
                }
            </style>

            <paper-scroll-header-panel condenses condensed-header-height="56"
                                       id="scroller">

                <!-- Main Toolbar -->
                <paper-toolbar>
                    <paper-input value="{{cover}}"></paper-input>
                    <paper-button on-click=onChange>Change!</paper-button>
                    <paper-icon-button icon="arrow-back"
                                       onclick="javascript:history.go(-1)"></paper-icon-button>
                    <div class="flex">Test</div>
                    <paper-icon-button icon="more-vert"></paper-icon-button>
                    <div class="bottom title">
                        <content select=".cover-title"></content>
                    </div>
                </paper-toolbar>

                <div class="content">
                    <content select=".main-content"></content>
                </div>

            </paper-scroll-header-panel>
        </template>

        <script>

            Polymer({

                is: 'recipe-layout',

                properties: {
                    cover: {
                        type: String,
                        observer: '_updateBg',
                        value: "blue"
                    },
                },
                onChange: function () {
                    this.cover = 'red';
                },

                _updateBg: function (cover) {
                    this.async(function () {
                        this.subupdateBg(cover);
                    }, 100);
                },

                subupdateBg: function (cover) {
                    var scrollerBg = this.$.scroller;
                    console.dir(scrollerBg);
                    var newStyle = 'background-color: '+ this.cover +';';
                    scrollerBg.customStyle['--paper-scroll-header-panel-full-header'] = newStyle;
                    scrollerBg.updateStyles();
                    console.log('SET!');
                }
            });
        </script>

    </dom-module>

    <recipe-layout/>
</body>
</html>