iron-icon hidden attribute does not work inside shadow root

[danielx]

Description

When using iron-icon inside a shadow root the global [hidden] { display: none; } CSS rule gets blocked and iron-icon stays visible.

Expected outcome

The hidden attribute should apply display: none;

Live Demo

https://jsbin.com/xidewewaki/2/edit?html,output

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Related to: PolymerElements/paper-button#122

[notwaldorf]

You need to add the style for hidden inside the shadow root. hidden has the lowest specificity, and it gets overwritten (see PolymerElements/paper-item#58 for a very long discussion on the topic)

[danielx]

I'm sorry, it somehow slipped my mind to provide the entire reason and all information when i created this issue.

Currently in shady DOM iron-icon gets hidden because a rule for [hidden] { display: none !important; } gets leaked from iron-flex-layout.html#L51 and places above the .iron-icon-0 style that acts as :host.

https://jsbin.com/bunozaloqe/1/edit?html,output

This makes the current behavior different in the shady and shadow DOM modes since shadow DOM does not leak like shady DOM.

Though it begs the question if it's iron-icon's responsibility to have a :host([hidden]) { ... } or the element placing it within its shadow root that needs to apply iron-icon[hidden] { ... }.