Polymer 1.0 hidden $ = "{{show}}" non funziona

Question

Sto tentando di creare un menu selezionabile, ma per qualche motivo l'attributo nascosto non funzionerà. Non funzionerà per entrambi i valori quindi non penso che sia un problema di associazione dei dati.

Sto usando questo metodo in altre parti del mio progetto e in altre liberie e framework javascript non diventa mai più complesso, quindi non riesco a vedere cosa sto facendo male.

Qualche idea?

<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> 

aggiornamento (css di carta-menù da 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

L'impostazione display: block del componente paper-menu rompe la funzionalità hidden.

L'utilizzo dell'attributo hidden è comunque considerato una cattiva pratica, perché esattamente questo problema si è verificato. È in conflitto con l'impostazione display.

Io suggerirei usando

• <template dom-if="..." o
• add/rimuovere una classe di nascosto e una regola CSS .hidden { display: none; } (questo funziona anche in IE9 che non riconosce l'attributo hidden.