Hidden attribute does not hide the component

DavidHenri008 commented 6 years ago

Description

The paper-radio-button element does not hide when the hidden attribute is applied to it. It seems the hidden attribute selector is not applied to the :host.

Expected outcome

I expect to see the component with CSS display:none on host when the hidden attribute is set to true.

Actual outcome

The component is still visible.

Browsers Affected

[x] Chrome (only tested on chrome)
[ ] Firefox
[ ] Safari 9
[ ] Safari 8
[ ] Safari 7
[ ] Edge
[ ] IE 11
[ ] IE 10

notwaldorf commented 6 years ago

If you want to send a PR to add a :host(hidden) style like this one that would be awesome! Otherwise, you need to add something like this where you're using the paper-radio-button:

[hidden] {
   display: none !important;
}

DavidHenri008 commented 6 years ago

@notwaldorf Hi Monica, I was in the middle of doing my first PR to fix this issue and while doing the unit test, I realized that it was already working... So I tried to understand why my test was passing (the radio button becomes hidden) but the result was different in my application. Here's what I found:

The unit test (basic.html) defines:

<head>
  <link rel="import" href="../paper-radio-button.html">
</head>
<body>
  <custom-style>
    <style is="custom-style">

    </style>
  </custom-style>

The paper-radio-button.html defines: <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> The iron-flex-layout.html defines:

<custom-style>
  <style is="custom-style">
    [hidden] {
      display: none !important;
    }
  </style>
</custom-style>

All this combine together, the default hidden behavior becomes defined in the test so my unit test becomes useless. What do you suggest me to do:

Add the test anyway?
Add the is="custom-style" attribute to the paper-radio-button style instead of the hidden behavior?
Do nothing and wait for it to be solved by someone else...

Thanks

Link2Twenty commented 6 years ago

I think a standalone [hidden] will work with shady-dom but if you want it to work with shadow-dom you have to use :host([hidden]).

Something like this should work for both shadow and shadow dom.

:host([hidden]) {
  display: none;
}

PolymerElements / paper-radio-button