Use HTML Templates

Write templates using standard HTML and a few directives that are unique to Lightning Web Components.

When a component renders, the <template> tag is replaced with the name of the component, <namespace-component-name>.

For example, in the browser console, a component with the template myComponent.html renders as <c-my-component>, where c is the default namespace.

HTML templates also render data to the DOM. Use simple syntax to declaratively bind a component’s template to data in the component’s JavaScript class.

A template can include nested <template> tags with directives.

Directives are special HTML attributes, like lwc:if and for:each, which give you more power to manipulate the DOM in markup.

Nested <template> tags must include one of the following directives: for:each, iterator:iteratorname, lwc:if, lwc:else, lwc:elseif, or if:true|false.

For example, instead of using the class attribute on a nested <template> tag, use the class attribute on a <div> or <span> tag instead.

Your components can throw an error or a warning for an invalid HTML syntax. If you use VS Code, we recommend installing the Salesforce Extensions Pack. This extension flags malformed or incorrect code while you type, which is helpful when working with template directives.

For more information on which directives are supported on the root or nested <template> tag, see HTML Template Directives.

See Also

• Render DOM Elements Conditionally
• Render Lists
• HTML Template Errors