bug: remove global hidden attribute styles

[brandyscarney]

Bug Report

Ionic version:

[x] 4.x

Current behavior:
We have the following CSS in the global core stylesheet:

[hidden] { 
  display: none !important;
}

This causes conflicts with the native hidden attribute, see the MDN docs here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

Expected behavior:
This style should not be there or it should not use !important. It may be seen as a breaking change to remove it but I'd argue it is a fix to a problem because it interferes with the native functionality of the attribute. Up for discussion.

Steps to reproduce:

1. Open this Codepen: https://codepen.io/brandyscarney/pen/XOLLLj
   • Verify the div is not displaying even though it has display block (adding !important does not override either)
2. Open this Codepen: https://codepen.io/brandyscarney/pen/YBooma
   • See that the div is displaying properly when Ionic is not included

Other information:
I stumbled on this while reviewing the following PR: #17359

[ElNinjaGaiden]

I would say, more than only remove the important! config, this has to be removed at all, or treated in a different way.

On my code I do have an IonButton (@ionic/react) where I'm binding the hidden button property to a value on handled by the state of my main/parent component (the component that holds the IonButton) and even after my flag on the state is set to false and I get this code rendered:

Even having the value of the property set to false, the button is inheriting the whole set of styles.

This, or, at least for that specific use case, the render logic should remove the hidden attribute at all instead of keep sending it as hidden="false" because the CSS is not using the attribute value in consideration due this

[brandyscarney]

@ElNinjaGaiden Yes, I think that it should be removed entirely since it interferes with the functionality of the native attribute. My only concern is that it may be a breaking change to some apps if we remove this, so I would need to do some more thorough testing on it.

[liamdebeasi]

This was fixed in #25829. Please note that since this is a breaking change, the fix will be available in Ionic 7, the next major release.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.