Polymer 1.0 hidden$="{{show}}" not working
<p>Im trying to create a toggleable menu, but for some reason the hidden attribute won't work. It won't work for either value so I don't think its a data binding problem.</p>

<p>I'm using this method in other parts of my project and in other javascript liberies and frameworks it never gets any more complex, so I can't see what i'm doing wrong.</p>

<p>Any ideas? </p>

<pre><code>&lt;link rel="import" href="../../bower_components/polymer/polymer.html"&gt;
&lt;link rel="import" href="../../bower_components/polymerfire/firebase-auth.html"&gt;
&lt;link rel="import" href="../../bower_components/paper-menu/paper-menu.html"&gt;
&lt;link rel="import" href="../../bower_components/paper-item/paper-item.html"&gt;


&lt;dom-module id="user-account-menu"&gt;

    &lt;template&gt;

        &lt;style&gt;
            img {
                width: 72px;
                height: 72px;
            }
            paper-menu {
                position: absolute;
                right: 15px;
                width: 200px;
                background: #A3A3A3;
            }
        &lt;/style&gt;


        &lt;firebase-auth
            id="auth"
            signed-in="{{signedIn}}"
            user="{{user}}"&gt;
        &lt;/firebase-auth&gt;


        &lt;!-- start the account dropdon --&gt;
        &lt;div&gt;
            &lt;img src="{{computePhotoURL()}}"&gt;

            &lt;paper-menu hidden$="{{show}}"&gt;
              &lt;paper-item&gt;This is a menu item&lt;/paper-item&gt;
              &lt;paper-item&gt;[[show]]&lt;/paper-item&gt;
            &lt;/paper-menu&gt;
        &lt;/div&gt;

    &lt;/template&gt;

    &lt;script&gt;
        Polymer({
            is: 'user-account-menu',

            properties: {
                show: {
                    type: Boolean,
                    value: true
                }
            },

            computePhotoURL: function() {
                // get the users photo, if one doesn't exist, 
                // get the default user avatar
                var photo;

                try {
                    photo = this.user.photoURL;
                    return photo;
                } catch(err) {
                    return 'https://developers.google.com/experts/img/user/user-default.png';
                }
            },
        });
    &lt;/script&gt;

&lt;/dom-module&gt;
</code></pre>

<p>update (css of paper-menu from dom):</p>

<pre><code>element.style {
}
&lt;style&gt;…&lt;/style&gt;
paper-menu {
    position: absolute;
    right: 15px;
    width: 200px;
    background: #A3A3A3;
}
&lt;style&gt;…&lt;/style&gt;
:host {
    display: block;
    padding: 8px 0;
    background: #ffffff;
    color: #212121; 
</code></pre>