if={foo}

Chocola provides two primary mechanisms for conditional rendering, depending on whether you need to preserve the element in the DOM or remove it entirely.

1. Toggle vs. Removal

• if={foo}: Toggles visibility using display: none. The element remains in the DOM tree, preserving its state and layout footprint even when hidden.
• del-if={foo}: Completely removes the element from the DOM when the condition is false. Use this for performance optimization or when you don't want the element to be accessible via CSS/JS.

<!-- Remains in DOM, hidden via CSS -->
<div if={isLoggedIn}>Welcome back!</div>

<!-- Removed from DOM if false -->
<div del-if={isLoggedIn}>Please log in to view content</div>

2. Logic Chains (elif, else)

You can chain multiple conditions by placing elif and else directives on siblings immediately following an if or del-if block.

<div if="{user.role === 'admin'}">Admin Panel</div>
<div elif="{user.role === 'editor'}">Editor Dashboard</div>
<div else>View Only</div>

Inline expressions are fully supported: <div if="{temperature > 30}">It's hot!</div>