Conditional HTML

Render a branch with lwc:if, lwc:elseif, and lwc:else. Retire the older conditional attributes.

Three directives

Put lwc:if, lwc:elseif, and lwc:else on a nested <template> or on an element. lwc:if and lwc:elseif take a field or a getter. lwc:else takes no value.

lwc:elseif and lwc:else must be the next sibling after lwc:if or lwc:elseif. A tag between them breaks the chain.

What lands in the DOM

The first true branch is rendered. The other branches are left out of the DOM, so they do not run child lifecycle hooks.

Use a getter when the check is more than a single field. The engine does not evaluate expressions such as count > 1 inside the directive.

Retire the old attributes

The older conditional attributes still parse, and Salesforce says they may be removed. A new template uses lwc:if, lwc:elseif, and lwc:else only.

Example

html

<template>
  <template lwc:if={isReady}>
    <p>Ready</p>
  </template>
  <template lwc:elseif={isWaiting}>
    <p>Waiting</p>
  </template>
  <template lwc:else>
    <p>Not started</p>
  </template>
</template>

• Render HTML conditionally