Alpine: x-show gets overridden by :style

[gilbert]

See this 2.3.1 example. The text shows up when it shouldn't. If you delete the :style line, or empty its value, or remove the backticks, it works as expected.

[muzafferdede]

i think it's because order of attributes. try this:

<div
  x-data="{ hide: true }"
  :style="`color: red`"
  x-show="!hide"
>
  You shouldn't see me
</div>

x-show should come after x-bind:style. Not sure why exactly this is happening but worth to check it out in core.

[qysp]

This happens because x-bind:style overwrites the style attribute of the element whereas x-show only mutates the display property of the inline style.

[muzafferdede]

Yes, that's exactly what is happening. x-bind overwrites style attribute instead of merging. x-bind should respect previous styles.

[SimoTod]

At the minute, class is the only attribute which would merge the preexisting value. As @muzafferdede suggested, when using different directive dealing with the style attribute, the safeat way is to put :style early in the attribute list since Alpine processes directives in order.
There was a pr to improve this behaviour but it's been put on hold for now. I think it's something it'll be looked at in v3.

[HugoDF]

Is there something obvious we need to fix here?

Directive precedence might be something we want to have a look at.

[ryangjchandler]

Is there something obvious we need to fix here?

Directive precedence might be something we want to have a look at.

I don't think precedence is a major problem now, maybe it just needs to be clear that there is an order of execution / evaluation. Might be worth putting it in the README.

[PaulMorel]

I think it would be good to document this quirk in the Readme for the time being.

[ryangjchandler]

I'm going to open a PR in a bit with some documentation updates so we can get this one closed.

[HugoDF]

@ryangjchandler did you have a chance to create that docs PR?

[ryangjchandler]

@HugoDF feel free to open it, been a bit caught up with work!