Ensure [hidden] works as expected

[adamwathan]

Resolves #4872.

This PR makes sure that the expected behavior of the [hidden] attribute is preserved even on elements where we override the default display value, like images, videos, iframes, etc.

[andresgutgon]

Hi, I have said this before and say it again. AWESOME project. I love it. I'm a customer xD

Ok let's go to my issue 😅

Is this the expected behavior?

So I see [hidden] style applied but if I have a display class like .flex it's overwritten.

I can fix on my part easily like this:

.hidden-attribute[hidden] {
  @apply hidden;
}

But I love Tailwind and I hate write CSS

[andresgutgon]

I guess this could be a variant like this?

const FancyReactComponent = ({ hidden }) => { ​
   return (<div className="flex:not([hidden])" hidden={hidden}>I'm hidden now</div>
}

I know I could do this with CSS classes. But in my use case I don't control the React component, just the CSS so the react component use hidden attribute