Bind to a core-list item's `hidden` attribute (Polymer 0.5)

Question

Digging into the core-list source code, it looks like it checks an element's hidden attribute using Javascript. But setting <div hidden="false"> results in the div being hidden. Can I somehow bind an expression to this Javascript attribute or do I need to submit a PR to core-list to explicitly add support?

Answer 1

You can hide / show polymer elements with the hidden? attribute.

<span hidden?="{{showSpan}}">This may or may not be hidden.</span>

if the boolean expression 'showSpan' is truthy, the span element is displayed, otherwise it is omitted.

You can toggle the state of showSpan like this:

<div on-click="{{showinput}}">
   <span hidden?="{{showSpan}}">This may or may not be hidden</span>     
</div>



 Polymer({

       showSpan: false,

       showinput: function() {
         this.showSpan = !this.showSpan;
         }
     });

Answer 2

If you want that your element not being hidden you should remove the hidden attribute. hidden="false" does not means much in html.