7

This questions has been asked multiple times but there is not a workable solution to this problem.

Use Case: we are building a dynamic form rendering engine where we have sections, sub-sections and we are using record/record-edit forms to show fields and objects on these sub sections. for each sub-section there is a custom object record from where we read fields and objects.

This is a managed package where someone can install and add their own configuration and the form will render in UI.

Problem: If there are complex use cases which record/record-edit forms cannot do we have also given a provision where in the same sub-section custom object record , you can give your own custom component name. In aura, this worked since we can render dynamic components using create component function from javascript but it doesn't work in LWC since this method is not exposed.

Documentation says use slots/make the markup predictable but if this has to be a managed package and render dynamic components based on each client's need how can we have static markup in LWC since we wont know the component name before run-time.

Any thoughts or ideas on this would be truly appreciated

2 Answers 2

2

Dynamic creation of the Lightning Web Components is not yet supported, so you need to stay with Aura Components.

But here is the Pull Request with proposed implementation of that functionality. https://github.com/salesforce/lwc-rfcs/pull/10 so you can follow it to know when it becomes available in the framework.

UPD: This duplicate question with the answer from Diego Ferreiro (co creator of LWC) Not able to render dynamic Lightning Web Component

1
  • 1
    Thank you @steals. Looks like SF is going to implement it ,not sure when it will come through.
    – RedDevil
    Nov 6, 2019 at 17:02
1

Lightning Web Components now supports Dynamic component creation as of Winter '24. You can use the new lwc:component base component and lwc:is directive.

Check the steps below

  1. To instantiate a dynamic component, a component's configuration file must include the lightning__dynamicComponent capability.

    <?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>
    
  2. To instantiate a component dynamically, use the <lwc:component> managed element with the lwc:is directive in a component's HTML file.

    <template>
       <div class="container">
         <lwc:component lwc:is={componentConstructor}></lwc:component>
       </div>
     </template>
    
  3. In the component's JavaScript file, import the custom element using the import() dynamic import syntax.

    import { LightningElement } from "lwc";
    
    export default class extends LightningElement {
       componentConstructor;
      // Use connectedCallback() on the dynamic component
      // to signal when it's attached to the DOM
      connectedCallback() {
        import("c/concreteComponent")
       .then(({ default: ctor }) => (this.componentConstructor = ctor))
       .catch((err) => console.log("Error importing component"));
      }
    }
    

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .