LWC - Send Property Down to Dynamically Created Template

Question

I have created a small app in LWC where different templates are shown by following this answer. The flipping of the templates works fine, but there doesn't appear to be an obvious way to send data down the hierarchy when changing the template.

Assuming you have a main component:

import { LightningElement } from "lwc";
import loadingTemplate from "./loading.html";
import finalTemplate from "./fancyTemplate.html";

export default class HelloWorld extends LightningElement {
    @track isLoading = true;
    @track recordId;

    render() {
        return this.isLoading ? loadingTemplate : finalTemplate;
    }
}

And loadingTemplate retrieves a recordId and sends it up to the main component through an event, which then gets bound to the recordId seen above.

How can I send the value of recordId down to finalTemplate upon generation? I can certainly do it with using a series of <div if:true{something}> elements, but feel this is something better suited for the JS to handle.

Answer 1

Since both templates - loading and fancyTemplate will be in same folder, they will be binded to the same js file explicitly. You, as a developer need not do anything. When recordId changes, it will automatically update in all templates when they load.

Here is the playground example

import { LightningElement, track } from 'lwc';
import custom1 from "./custom1.html";
import custom2 from "./custom2.html";

export default class App extends LightningElement {
    @track isLoading = true;
    @track recordId;

    render() {
        return this.isLoading ? custom1 : custom2;
    }

    setRecordId = () => this.recordId = 'XXX123123';
    loadingDone = () => this.isLoading = false;
}

When you click on Set Record Id and then on Loading Done to mimic the server call, you will see the new value in new template custom2.html when it loads.