keanulee
commented
8 years ago In your provided JS Bin, the dynamic one isn't hidden because you misspelled isAdminstrator/isAdministrator. You also have an extra opening <script> tag.
The style-scoping in Shadow DOM (i.e. when you don't comment out that line) prevents the global [hidden] style (https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html#L51) from being applied inside your element. As noted in MDN, the hidden attribute does not hide an element if another display property is set on that element (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden). So either you shouldn't rely on the hidden attribute to hide your element, or add a [hidden] { display: none } rule in your element's style.
Description
I have a menu which consists of a number of buttons, some of which I want to hide when the user does not have sufficient permissions to access the function this button leads to. I am attempting to use the construct `hidden$="{{!property}}" to hide the buttons dynamically and it is not working.
In attempting to generate a jsbin to prove this, I have discovered a difference between serving the test file from jsbin and serving the exact same code from an html file locally using
polymer serve. In this case an element with ahiddenattribute explicitly placed on a button element is hidden in jsbin but is not hidden in the test file served locally.However if I comment out the line
on my locally sourced version the button with the hidden attribute becomes hidden (the one linked via databinding remains visible)
All of the above is with chrome. When I attempt to do trun the jsbin in firefox I get no output at all.
Expected outcome
Both buttons with the text hidden are hidden
Actual outcome
In jsbin the element with the static hidden attribute is hidden the dynamic one isn't, on a locally served version both hidden buttons are visible
Live Demo
http://jsbin.com/wujazo/edit?html,output
Steps to reproduce
Browsers Affected
Not tried the rest