Dynamic component creation in LWC

Greetings Trailblazers!

In this blog, we will see how to use dynamic LWC components. 

With statically loaded LWC components, all the components are pre-loaded even if they are not needed. Sometimes, this can be inefficient, especially when you have multiple components on the page and they don't need to be displayed unless the user changes the state.

Dynamic LWC components can improve performance by reducing the overhead of initial component loads. This is because you only load the components when they are needed, rather than loading all of your components at once.

Requirements for dynamic Lwc components

Before we see how to use dynamic components let's see what are the prerequisites for that.

• You Need API version 55 or later.
• You need to Enable Lightning Web Security in the org.
• The component that needs to be loaded dynamically must include the lightning__dynamicComponent capability in its configuration file 

Creating LWC components dynamically

Configure the Dynamic Component Capability

To use dynamic components in your LWC components, you must configure the dynamic component capability in your component's configuration file. To do this, add the following XML to the <capabilities> section of your component's configuration file:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>59.0</apiVersion>
  <capabilities>
    <capability>lightning__dynamicComponent</capability>
  </capabilities>
</LightningComponentBundle>

Import component and constructor

Once the component capability is set you can call that component dynamically, now you need to import the component and its constructor and store them in the js property of the target parent component.

import { LightningElement } from "lwc";
export default class extends LightningElement {
  componentConstructor;

  connectedCallback() {
    import("c/my-dynamic-component")
      .then(({ default: ctor }) => (this.componentConstructor = ctor))
      .catch((err) => console.log("Error importing component"));
  }
}

Dynamic Component Markup Syntax

To create a dynamic component, use the <lwc:component> element with the lwc:is directive in your target parent component's HTML file. The lwc:is directive specifies the constructor (i.e. componentConstructor from the previous step) of the dynamic component to create.

<template>
  <lwc:component lwc:is={componentConstructor}></lwc:component>
</template>

Selecting the Dynamically Added Component

Once you have created a dynamic component, you can select it using the lwc:ref directive or by using an attribute that is assigned to the component, such as a class name.

The following HTML code sets the lwc::ref  myCmp to the dynamically added component.

<template>
  <lwc:component lwc:is={componentConstructor} lwc:ref="myCmp"></lwc:component>
</template>

The following code will log the dynamic component with the  myCmp reference when it is available on DOM:

renderedCallback() {
    if (this.refs.myCmp) {
        // this.refs.myCmp will contain a reference to the DOM node
        // you can access all the public props and functions with the help of this reference.
        console.log(this.refs.myCmp);
    }
}

Checkout: Setting public properties of dynamically created lwc component