Polymer 1.0 hidden$="{{show}}" not working

Question

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.

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.

Any ideas?

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">


<dom-module id="user-account-menu">

    <template>

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


        <firebase-auth
            id="auth"
            signed-in="{{signedIn}}"
            user="{{user}}">
        </firebase-auth>


        <!-- start the account dropdon -->
        <div>
            <img src="{{computePhotoURL()}}">

            <paper-menu hidden$="{{show}}">
              <paper-item>This is a menu item</paper-item>
              <paper-item>[[show]]</paper-item>
            </paper-menu>
        </div>

    </template>

    <script>
        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';
                }
            },
        });
    </script>

</dom-module>

update (css of paper-menu from dom):

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

Answer 1

Another option is just to add this to your styles:

<style>
  [hidden] {
    display: none !important;
  }
</style>

Answer 2

The display: block setting of the paper-menu component breaks the hidden functionality.

Using the hidden attribute is considered bad practice anyway because exactly this issue you just run into. It conflicts with the display setting.

I'd suggest using

• <template dom-if="..." or
• add/remove a hidden class and a CSS rule .hidden { display: none; } (this also works in IE9 which doesn't recognize the hidden attribute.