Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Hidden attribute does not hide the component #126

Open
1 of 8 tasks
DavidHenri008 opened this issue Mar 20, 2018 · 3 comments
Open
1 of 8 tasks

Hidden attribute does not hide the component #126

DavidHenri008 opened this issue Mar 20, 2018 · 3 comments

Comments

@DavidHenri008
Copy link

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

  • Chrome (only tested on chrome)
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10
@notwaldorf
Copy link
Contributor

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
Copy link
Author

@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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@notwaldorf @Link2Twenty @DavidHenri008