Component HTML File

Every UI component must have an HTML file with the root tag <template>. Service components (libraries) don’t require an HTML file.

The HTML file follows the naming convention <component>.html, such as myComponent.html.

Create the HTML for a Lightning web component declaratively, within the <template> tag. The HTML template element contains your component’s HTML.

<!-- myComponent.html -->
<template>
    <!-- Replace comment with component HTML -->
</template>

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

The HTML spec mandates that tags for custom elements (components) aren’t self-closing. In other words, custom elements must include separate closing tags. For example, the c-todo-item component nested in this component includes a separate closing </c-todo-item> tag.

<!-- myComponent.html -->
<template>
    <c-todo-item></c-todo-item>
</template>

Write markup that you may not want to display when the page loads, but that can be rendered at runtime. See Render DOM Elements Conditionally.

Use simple HTML template syntax to render lists. See Render Lists.

Create placeholders in the template that component consumers can replace with content. See Pass Markup into Slots