hidden attribute does not always work for shadow dom

[coreyfarrell]

Description

The 'hidden' attribute does not work on polymer elements inside other polymer elements when using shadow dom. Works as expected with shady dom, tested on Chrome 51.

The browser inspector shows two important style selectors when using shadow DOM:

:host {
  display: block;
}
paper-input[Attributes Style] {
  display: none;
}

The :host selector is used over paper-input[Attributes Style].

CSS when using shady DOM:

[hidden] {
  display: none!important;
}
.paper-input-0 {
  display: block;
}
paper-input[Attributes Style] {
  display: none;
}

With shady DOM the [hidden] selector applies first, if that is disabled with the inspector then .paper-input-0 applies.

Live Demo

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

[coreyfarrell]

To anyone who is having this issue, you can work-around by adding the following to a global stylesheet:

body /deep/ [hidden] {
  display: none!important;
}

Note that /deep/ is deprecated, but it works.

[sorvell]

The root issue here is how the hidden attribute works in css. It has very low specificity and any other display setting will override it. It's unfortunate that iron-flex-layout addresses this issue in a way that is incompatible with Shadow DOM. There's a tracking issue for this with more information here: PolymerElements/iron-flex-layout#86.

If you want the hidden attribute to enforce that an element is actually display none, you can include a style inside your element that does:

[hidden] {
  display: none !important;
}