hidden attribute does not work for paper-input inside shadow dom

[coreyfarrell]

Description

paper-input does not respect the hidden attribute when used inside a shadow root. This is a common issue in many Polymer elements, I'm just randomly starting with paper-input.

Expected outcome

The hidden attribute should cause display:none to apply.

Actual outcome

The :host selector takes over, causing paper-input to remain visible even with hidden attribute.

Live Demo

https://jsbin.com/gukazaxenu/edit?html,output

Proposed fix

We should be using :host(:not([hidden])) selector to specify the display option of custom elements.

[notwaldorf]

This is true -- unfortunately this is a problem with the hidden attribute, which has the lowest importance and gets overwritten by any other display: property. There's a more detailed discussion on this topic in the iron-flex-layout repo: PolymerElements/iron-flex-layout#86

The fix right know is for you to specify what paper-input[hidden] means, unfortunately. :(

[coreyfarrell]

Can we discuss further? I understand how the hidden attribute works and how it is easily overwritten. I'm saying that paper-input should not set the display property for itself when the hidden attribute is specified. More specifically <paper-input type="text" hidden></paper-input> should do the right thing with no additional CSS, regardless of where it is placed.

The discussion on iron-flex-layout is over the fact that it leaks display:none!important globally. This issue is about the fact that paper-input does not do the right thing when hidden is used (leaking display:block). paper-input default style can and should do the right thing for paper-input.

Note my commit https://github.com/coreyfarrell/paper-input/commit/3a95e117589eb94e3a610a5bc9bf0b0fce7afde9 doesn't deal with <paper-input-container inline hidden>, I haven't had a chance to test how to write that selector. All other parts of paper-input respect the hidden attribute.

[notwaldorf]

paper-input needs to set a display property -- the default is inline, which means styles will be pretty whack. I think the solution is actually to just specify what hidden means when applied to the paper-input host (by adding a host([hidden]) selector , like what paper-item does, for example: https://github.com/PolymerElements/paper-item/blob/master/paper-item-shared-styles.html#L35

[coreyfarrell]

The default is inline except [hidden] { display: none }. My patch just allows the built-in global style for [hidden] to continue working.

I could rework to use :host([hidden]) { display: none!important; }, but I feel like !important is worth avoiding.

[notwaldorf]

While worth avoiding, !important is a thing we've been doing for hidden in other places, and only then. Plus, positive selectors are easier to read and understand.

Feel free to send a PR for this!