7

The Lightning Web Components Dev Guide gives this example in the article titled Render HTML Conditionally, where a conditionally-rendered div element is wrapped in a template element containing an if:true attribute:

<!-- helloConditionalRendering.html -->
<template>
    <lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input>
            <template if:true={areDetailsVisible}>
                <div class="slds-m-vertical_medium">
                    These are the details!
                </div>
            </template>
        </div>
    </lightning-card>
</template>

In practice, you can add an if:true or if:false attribute to just about anything in LWC, and it will render or not render accordingly. Is there anything wrong with this alternative version, where the template element is omitted and the if:true attribute is applied directly to the div? If not, why does Salesforce promote a pattern that is more verbose and leads to deeper nesting in HTML templates?

<!-- helloConditionalRendering.html -->
<template>
    <lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input>
            <div if:true={areDetailsVisible} class="slds-m-vertical_medium">
                These are the details!
            </div>
        </div>
    </lightning-card>
</template>

2 Answers 2

11

Yes, you must use <template> for conditional rendering. This change was made after the original answer was posted. In addition, the conditions if:true and if:false have now become lwc:if, lwc:elseif, and lwc:else. This fixes the situation where a developer used to be able to write if:true and if:false on the same element, which caused a runtime error if both were specified and certain conditions were met.

Original Answer

No, you do not need to use <template> to host various attributes and directives, including if:true, if:false, for:each, iterator:*, for:item, for:index, or key. The documentation further doesn't explore any particular reason why you would want to use <template> for this purpose.

I think salesforce.com is trying to imply that it is "easier" or "more consistent to read," but, like you, I prefer my code to be as concise as possible, as long as legibility isn't sacrificed in the process. Establishing a clear pattern (e.g. listing such attributes upfront so they're more "visible," using appropriate indentation/line breaks/etc) can help avoid any confusion. It's more important to have a consistent style.

If you prefer the <template> model, feel free to use it, and if not, consider the alternatives acceptable. Just remember that you always have to obey any relevant rules (e.g. for:each must also have a key on the element).

2
  • @Domanell's new answer below seems to be calling out a recent change in the LWC docs. It looks like Salesforce is now explicitly saying we can use lwc:if, lwc:elseif, and lwc:else on essentially any kind of HTML tag. Do we need another revision to this answer? Commented Feb 2 at 16:19
  • 1
    @MatthewSouther Interestingly, my link still just says "nested <template> tag". There's a documentation bug somewhere. I'll ask.
    – sfdcfox
    Commented Feb 2 at 17:50
1

lwc:if|elseif={expression} and lwc:else

Conditionally render DOM elements in a template. lwc:if, lwc:elseif, and lwc:else supersede the if:true and if:false directives.

Use the conditional directives on nested <template> tags, <div> tags or other HTML elements, and on your custom components tags like <c-custom-cmp>.

Directives for Nested Templates

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .