The Alpine.js x-ignore plugin

The x-ignore directive prevents Alpine.js from initializing components within its DOM tree.

This directive is native to Alpine v3. For Alpine v2 themes, Hyvä backports it via the hyva-themes/magento2-theme-module (v1.3.7+), ensuring automatic inclusion. Hyvä often uses x-ignore with the x-defer directive.

See an example below:

<div x-data="{ label: 'This will not be evaluated' }">
    <div x-ignore>
        <span x-text="label"></span>
    </div>
</div>