LWC Dynamic Code: Calling LWC from Aura Component

In Salesforce development, migrating legacy applications from Aura to Lightning Web Components (LWC) often requires interoperability. While LWC offers a lighter, faster architecture, developers frequently need to instantiate an LWC dynamically inside an existing Aura Component container.

In plain words: You can instantiate an LWC dynamically inside an Aura Component by calling $A.createComponent() in the Aura JavaScript controller and appending the generated component into an <aura:attribute> or container body.

Prerequisites

• Salesforce Environment: A Developer Org, Sandbox, or Scratch Org.
• Component Framework Basics: Basic understanding of Aura component markup, JS controllers, and LWC component structure.

Step 1: Create the Target Lightning Web Component

First, build the LWC component that will be dynamically instantiated. Note that LWC naming uses camelCase (sampleLwcComponent), which translates to kebab-case (c-sample-lwc-component) in markup.

sampleLwcComponent.html

<template>
    <lightning-card title="Dynamically Called LWC" icon-name="standard:action_list_item">
        <div class="slds-m-around_medium">
            <p>Hello from the dynamically loaded Lightning Web Component!</p>
            <p>Passed Message: <strong>{message}</strong></p>
        </div>
    </lightning-card>
</template>

sampleLwcComponent.js

import { LightningElement, api } from 'lwc';

export default class SampleLwcComponent extends LightningElement {
    @api message = 'Default Message';
}

Step 2: Create the Container Aura Component

Create an Aura Component containing an initialization handler (aura:handler) and a container element (div or {!v.body}) with an aura:id tag to host the dynamic component.

dynamicLwcHost.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <lightning:card title="Aura Host Container">
        <div class="slds-p-around_medium">
            <!-- Dynamic LWC will render inside this container -->
            <div aura:id="lwcContainer"></div>
        </div>
    </lightning:card>
</aura:component>

Common Developer Mistake: Do not attempt to use non-existent tags like <aura:registerComponent>. Salesforce Aura does not require registration tags to instantiate LWCs dynamically.

Step 3: Implement the Aura JavaScript Controller

In dynamicLwcHostController.js, invoke $A.createComponent() using camelCase for the LWC component tag name (c:sampleLwcComponent):

({
    doInit: function (component, event, helper) {
        // Instantiate the LWC dynamically
        $A.createComponent(
            "c:sampleLwcComponent",
            {
                "message": "Hello from Dynamic Aura Controller!"
            },
            function (newLwcComponent, status, errorMessage) {
                if (status === "SUCCESS") {
                    var container = component.find("lwcContainer");
                    container.set("v.body", [newLwcComponent]);
                } else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.");
                } else if (status === "ERROR") {
                    console.error("Error creating component: " + errorMessage);
                }
            }
        );
    }
})

When passing attributes to LWCs inside $A.createComponent(), use exact property names marked with @api decorators in your LWC JavaScript class.

Static vs Dynamic Inclusion Summary:

• Static Inclusion: Embed directly in Aura markup using kebab-case: <c:sample-lwc-component message="Hello"></c:sample-lwc-component>.
• Dynamic Inclusion: Call $A.createComponent("c:sampleLwcComponent", {...}, callback) inside the Aura controller.

Conclusion

Dynamically loading LWCs from Aura components enables seamless migration strategies and flexible runtime UIs. By leveraging $A.createComponent() with proper container binding, developers can bring modern LWC performance into legacy Aura applications.