I am trying create components dynamically with the help of lwc:dynamic directive in LWC OSS.

I am able to create those comments dynamically, but not able to set the properties to them. For each different component I have different set of properties that I want to pass on to.

Here is the code I am trying.


import { LightningElement } from 'lwc';

export default class CompositionDynamic extends LightningElement {

    async loadComponent() {
        const ctor = await import('recipe/hello');
        // how can I set properties here? For example label,name etc.
        // Like the components i also want to import their default property values dynamically.
        this.componentConstructor = ctor.default; 


    <ui-card title="CompositionDynamic">
        <ui-button label="Load Hello Component" onclick={loadComponent}>

        <div class="dynamic-component">
                You can use any tag name for the dynamic component as long as it belongs to your namespace and it's not an existing component in your project.
                For example: In this recipe, we use a "recipe-dynamic-import" tag, but there's no dynamicImport component in the recipe namespace.

        <recipe-view-source source="recipe/compositionDynamic" slot="footer">
            Load a component dynamically by assigning a constructor at runtime.

I have already tried the below code but didn't work

this.componentConstructor.prop = "value";
this.componentConstructor.setAttribute("prop", "value");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.