Why x-show do not hide nested button

[bubnenkoff]

https://codepen.io/bubnenkoff/pen/MWEpPpV

Why I am still seeing blue button borders? The elements inside x-show should be hidden. How to hide all?

[SimoTod]

The HTML is invalid, you can't have a block-level element inside an inline element. If you inspect the console, you'll see that the browser moved some HTML outside of the tag (this happens without Alpine, it's just the browser trying to patch badly formatted documents on the fly).

[bubnenkoff]

thanks! What could be replacement for <a> if I am doing site menu and examples of navs use a

[SimoTod]

Generic containers should be <div>s if block-level or <span>s if inline-level.
You can safely use a div in your initial example.

You also have another link inside a button which is a bit weird (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)