Alpine: Allow using x-show on HTML elements with "hidden" attribute

[piotrpog]

I wanted to use hidden attribute to prevent "flickering" of content that is hidden using x-show attribute but is visible before JS kicks in. Unfortunately, when hidden is present, element never becomes visible.

I managed to walk around this by binding hidden attribute to a variable:

<div hidden :hidden="hideSomething">content</div>

But why don't we make x-show usable when hidden attribute is present?

[SimoTod]

x-show works by adding and removing 'display: none'.
It's just the way it has been designed.

Is it when the page loads? Can you use the x-cloak attribute? At the moment, it's the recommended way to hide an element before alpine kicks in and it's a pattern used by many other js frameworks.

[ryangjchandler]

Just add this to your CSS and use the x-cloak attribute:

[x-cloak] { display: none; }

[ryangjchandler]

Hi all, going to close this issue now since a couple of good solutions have been suggested. It's generally best to use what the framework already provides for this sort of use case.

If you think the behaviour mentioned in the OC is necessary and vital in core, please open another issue with some explanation and reasons why. Thanks! :)