Toggling client-side visibility

Each Loki Component (which is a Magento block) is rendered with a PHTML template. However, this PHTML template is overridden by the Loki logic, depending upon methods like isVisible(), isAllowRendering() and isLazyLoad(). This server-side visibility can only be toggled via a template reload (so, a component update with AJAX call). However, there is also an option to toggle visibility on the client-side.

The Alpine.js part of a Loki Component (aka, the Alpine.js component) has a visible property and there is a way to add HTML attributes to a certain block (assuming it is a Loki Component). For example, the following works:

<referenceBlock name="loki-checkout.customer.customer_email">
	<arguments>
  	<argument name="html_attributes" xsi:type="array">
    	<item name="x-show" xsi:type="string">visible</item>
    </argument>
  </arguments>
</referenceBlock>