Conditional rendering with lwc:if and lwc:else
Key Takeaway
A chain of lwc:if, lwc:elseif and lwc:else renders only one branch, and the tags must sit directly next to each other.
Conditional rendering lets a Lightning web component show different HTML depending on the value of a property in its JavaScript class. You add lwc:if, lwc:elseif and lwc:else to the markup, and the engine inserts or removes the DOM elements when the property changes. The enclosed elements are not created or rendered until the condition is met, so a page loads faster.
How the directives work
Lightning Web Components supports three conditional directives: lwc:if={property}, lwc:elseif={property} and lwc:else. lwc:if and lwc:elseif bind a property to the template. The engine inserts the enclosed elements when the value is truthy and removes them when it is falsy.
In a chain of these directives, only one branch renders: the first one whose property is truthy, or the lwc:else branch if none are truthy. lwc:elseif and lwc:else are optional, so lwc:if can stand alone.