Introducing new directives lwc:is in #SalesforceWinter24Release

Exciting news for Lightning Web Components (LWC) developers!

Introducing new directives for LWC.

lwc:is: This directive is now available, providing an imported constructor at runtime to the <lwc:component> managed element. 

With this, you can dynamically instantiate another component within a component. 

Check out the sample code below:

<template>

    <div class="container">

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

    </div>

</template>

Using <lwc:component> as a placeholder in the DOM, you can now render the specified dynamic component. 

Remember, the lwc:is directive is essential when using <lwc:component>.

However, it's important to note that Lightning Web Security must be enabled in your org to utilize this feature. 

For more information and guidelines, check the official documentation on Dynamically Import and Instantiate Lightning Web Components.

Documentation Link - https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_directives.htm&release=246&type=5