Render Multiple Templates in LWC!

Sometimes, you may need different versions of a component. 

For example, you might want one version that's plain, and another version that includes an image and extra text. 

With the ability to render multiple templates, you can import different HTML templates and write business logic to conditionally render them. 

But hang on!

Is there a recommended way to achieve this? Absolutely! 

While it is possible to render multiple templates, we highly recommend using the lwc:if|elseif|else directives to render nested templates conditionally instead.

So, how can you implement this pattern effectively? 

Here's a step-by-step guide:

1. Create multiple HTML files in the component bundle, each representing a different template.

2. Import all the templates into your component's JavaScript file.

3. Add a condition in the render() method to return the correct template based on the component's state.

4. Important: The returned value from the render() method must be a template reference, which is the imported default export from an HTML file.

Here's an example to help you visualize this concept:

//MultipleTemplate.js

import { LightningElement } from "lwc";

import templateOne from "./templateOne.html";

import templateTwo from "./templateTwo.html";

export default class MiscMultipleTemplates extends LightningElement {

  showTemplateOne = true;

  render() {

    return this.showTemplateOne ? templateOne : templateTwo;

  }

  switchTemplate() {

    this.showTemplateOne = !this.showTemplateOne;

  }

}

Now, you can easily switch between different versions of your component by calling the switchTemplate() method! 

But there's more! 

To reference CSS from an extra template, the CSS filename must match the filename of that specific template. 

For instance, you can only reference CSS from templateTwo.css if the template is templateTwo.html. 

It cannot reference CSS from MultipleTemplate.css or templateOne.css.

Finally, if you include a template with the same name as the component (MultipleTemplate.html in this case), the default render() method will return that template. 

However, you can override this behavior by specifying a different template in the render() method.