paper-radio-button icon indicating copy to clipboard operation
paper-radio-button copied to clipboard

Published 20 hours ago • verified publisher icon PolymerElements

Hidden attribute does not hide the component

Open DavidHenri008 opened this issue 6 years ago • 3 comments

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

DavidHenri008 avatar Mar 20 '18 17:03 DavidHenri008

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;
}

notwaldorf avatar Mar 20 '18 18:03 notwaldorf

@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

DavidHenri008 avatar Mar 21 '18 12:03 DavidHenri008

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;
}

Link2Twenty avatar May 08 '18 12:05 Link2Twenty