While exploring the Lightning Web Components for Aura Developers module on Trailhead, I found the following section intriguing:
Generating Components Dynamically In Aura components, you have the capability to dynamically generate a component in JavaScript through $A.createComponent(). However, there isn’t an equivalent method for dynamic component creation in Lightning web components.
This decision is intentional. The primary rationale behind not adopting this pattern in Lightning web components is that the approach used in Aura components often results in buggy and complex code.
A preferable approach in Lightning web components is to design multiple HTML templates for your component. By leveraging the render() method of the component, you can switch between templates based on the specific requirements of the component. This approach closely resembles route splitting techniques employed in various other JavaScript frameworks.
What does the render() method entail, and how can it be utilized? Currently, there’s a scarcity of documentation addressing this query. This blog post aims to fill that gap by offering the pertinent insights.
Links: https://developer.salesforce.com/docs/platform/lwc/guide/create-render.html
Let’s kick things off by checking out a live demonstration of a Lightning web component example in the Lightning Web Components Playground. Take a few moments to give it a try and take a peek at the source code.
Alternatively, you can locate the source code on GitHub and deploy the Lightning web component in your own developer org. However, I suggest exploring it within the playground.
In terms of functionality, this Lightning web component is fairly straightforward. It features a button that, when clicked, switches between two different layouts. As we delve into the source code, we’ll discover that this is achieved by swapping templates using the render lifecycle hook.
Now, let’s examine the source code. The first thing you might notice is the unconventional file structure.
Lightning web components can indeed include additional HTML files and subfolders. While there isn’t official documentation specifying the supported file system structures, it’s worth noting that having a root-level folder named “templates” within your component’s directory, containing any number of HTML files, is reportedly going to be officially supported.
The JavaScript File
import { LightningElement, track } from 'lwc';
import mainTemplate from './renderHookExample.html';
import demoTemplate from './tempates/anDemoTemplate.html';
export default class RenderTest extends LightningElement {
@track userName = 'User';
@track useDemoTemplate = false;
render() {
return this.useDemoTemplate ? mainTemplate : demoTemplate;
}
handleToggleButtonPress() {
this.useDemoTemplate = !this.useDemoTemplate;
}
}By implementing the render() method on line 9, we effectively override the default rendering mechanism of the Lightning web component. This is because the render() method serves as a lifecycle hook within the Lightning Web Components framework. Whenever a reactive property changes, the render lifecycle hook is invoked, requiring the component to return an HTML template for rendering.
If we had not included the render lifecycle hook, the default rendering behavior would have been to render the contents of the HTML file with the same name as the containing folder (i.e., renderHookExample.html). However, by overriding this default behavior, we now have the autonomy to select the HTML template for rendering.
In this instance, the HTML templates conditionally returned by the render lifecycle hook were imported from their respective HTML files, as seen on lines 2 and 3 in the JavaScript file.
Regarding binding, observe the property named userName on line 3 within the JavaScript file. This property is bound to both HTML files using expression syntax.
renderHookExample.html
<template>
<p>
hello {userName},
</p>
<p>
this is the template from lwc/renderHookExample/renderHookExample.html
</p>
<button onclick={handleToggleButtonPress}>toggle</button>
</template>anExampleTemplate.html
<template>
<p>
hello {userName},
</p>
<p>
this is the template from lwc/renderHookExample/templates/anDemoTemplate.html
</p>
<button onclick={handleToggleButtonPress}>toggle</button>
</template>During the live demonstration, both templates display ‘User’ as the property’s value upon rendering. This indicates that both templates retrieve the properties from the renderHookExample.js file for binding when they are rendered.
In conclusion, I trust you now have a solid grasp of how to utilize the render lifecycle hook to switch templates in Lightning web components. Please feel free to share any feedback or questions you may have!
Additional Notes: At present, dynamic template creation is not supported. You can only create an HTML template by importing it from an existing HTML file. Although Trailhead initially mentioned that the render lifecycle hook would replace dynamic component creation.
