Links

HTML Template Directives - Salesforce Lightning Component Library

Render DOM Elements Conditionally - Salesforce Lightning Component Library

Render Lists - Salesforce Lightning Component Library

Introduction

The template is created using HTML. Not all elements that you code in the HTML appear to the end user, as you can use conditional rendering.

• The template includes markup but also LWC data bindings to variables, functions invocations and LWC directives (like lwc:if and for:each, which give you more power to manipulate the DOM in markup).
• There is a translation from your HTML and the HTML rendered to the end’s user browser, check the example bellow.

The following is an example of the translation that LWC provides:

<template>
	<div class="slds-var-m-around_medium">
		My First LWC!!
	</div>
</template>

Is translated to:

<c-my-first-lwc>
	<div class="slds-var-m-around_medium">
		My First LWC!!
	</div>
</c-my-first-lwc>

• You can nest templates, but must include one of the following directives: for:each, iterator:iteratorName, lwc:if, lwc:else, lwc:elseif, or if:true|false.

Bind a variable to a Javascript Property

Look at the following example for a template and a Javascript files, where the template uses a property:

<template>
	<p>Hello, {greeting}!</p>
		<lightning-input label="Name" value={greeting} onchange={handleChange}>
		</lightning-input>
</template>

import { LightningElement } from ‘lwc’; 
export default class HelloBinding extends LightningElement { 

	greeting = 'World';
	handleChange(event) {
	    this.greeting = 'touché' ; //<-- The value in the event
	}
}

• The greeting property in the template is bound to the greeting property in the JavaScript class.