Render Multiple Templates
Although it’s possible for a component to render multiple templates, we recommend using the
lwc:if|elseif|else directives to render nested templates conditionally instead.
Create multiple HTML files in the component bundle. Import them all and add a condition in the
render() method to return the correct template depending on the component’s state. The returned value from the
render() method must be a template reference, which is the imported default export from an HTML file.
In this example, the template references are
To reference CSS from an extra template, the CSS filename must match the filename of the extra template. For example,
templateTwo.html can reference CSS only from
templateTwo.css. It can’t reference CSS from
If you include a template with a matching name,
miscMultipleTemplates.html, the default
render() method returns that template unless you include an override discussed in the previous example.
Check out the
miscMultipleTemplates component in the lwc-recipes repo.