HTML Templates

The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. It’s a best practice to let LWC manipulate the DOM instead of writing JavaScript to do it.

Use a <template> root tag in your HTML template. You can also use nested <template> tags to work with directives.

• Use HTML Templates
  Write templates using standard HTML and a few directives that are unique to Lightning Web Components.
• Data Binding in a Template
  Bind properties in a component’s template to properties in the component’s JavaScript class.
• Render DOM Elements Conditionally
  To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content.
• Render Lists
  To render a list of items, use for:each directive or the iterator directive to iterate over an array. Add the directive to a nested <template> tag that encloses the HTML elements you want to repeat.
• Render Multiple Templates
  You may want to render a component with more than one look and feel, but not want to mix the HTML in one file. For example, one version of the component is plain, and another version displays an image and extra text. In this case, you can import multiple HTML templates and write business logic that renders them conditionally. This pattern is similar to the code splitting used in some JavaScript frameworks.

See Also

• Lifecycle Hooks

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_html