Search code examples
polymerpaper-elements

No Polymer/Paper elements will show up


Im starting a site using Polymer and the Paper Elements designed for it. I have install the components using bower and it seems i have everything in the right place. here is my code:

<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

    <link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
    <link rel="import" href="bower_components/core-item/core-item.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">
    <link rel="import" href="bower_components/paper-fab/paper-fab.html">
</head>
<body fullbleed unresolved>
<template is="auto-binding">
    <core-scaffold>
        <core-header-panel navigation flex>
            <core-toolbar class="tall">

            </core-toolbar>
        </core-header-panel>

        <div tool layout horizontal flex>
            <span flex>Toolbar Text</span>
            <core-icon icon="account-circle"></core-icon>
            <span>7</span>
        </div>

        <div flex>
            <div class="send_message" layout horizontal>
                <paper-input flex label="Enter Text..." id="input" value="{{input}}"></paper-input>
                <paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab>
            </div>
        </div>

    </core-scaffold>
</template>

</body>

</html>

Nothing show up once i load the webpage tho. If i take out the template tag i can see the text in my toolbar, but still none of the elements render. Any help is appreciated, thanks in advance!


Solution

  • It looks like you're using an old version of Polymer (< 1.0) based on your usage of core-* elements (replaced by iron-*) and auto-binding (replaced by dom-bind). Polymer docs have a migration guide that could help you upgrade, but it might be easier to start from scratch, using Polymer Starter Kit (which has the latest and greatest).