LWC: Do I have to use a template element with if:true?

Question

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>

Answer 1

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).