We’re excited to announce the General Availability of Dynamic Components with Lightning Web Components (LWC) in the Winter ’24 release. This is a significant enhancement to the LWC framework. With Dynamic Components, developers and administrators can now deliver flexible, customizable experiences by leveraging the power of dynamic import and instantiation. Dynamic components empower developers and administrators, and accelerate developer productivity by making it easy for them to build a custom UI and reuse components across applications.
Dynamic Components have long been a popular capability within the Salesforce Lightning platform using the Aura framework, empowering administrators and developers to create reusable and configurable components without writing extensive code. Now, this sought-after functionality is extending its reach to the LWC framework, further expanding the possibilities for flexible and adaptable UI.
What are dynamic components?
Dynamic components allow you to create configurable and reusable components that can be dynamically added or removed from a Lightning App Builder page or LWC-based application. By exposing properties, developers can control the behavior, appearance, or data displayed by these components, enabling unparalleled customization options.
Bringing Dynamic Components to Lightning Web Components
With the introduction of dynamic components support for LWCs, developers can now harness the benefits of dynamic composition within the modern LWC framework. This feature enables seamless integration of configurable components into LWC-based applications, promoting reusability and reducing development time.
To instantiate a dynamic component, a component’s configuration file must include the lightning__dynamicComponent capability.
To create a component dynamically, use the <lwc:component> managed element with the lwc:is directive.
Import the custom element in the connectedCallback() method using the import() dynamic import syntax.
The import() call returns a promise that resolves to a LightningElement constructor. The element is then rendered in place of lwc:component. The tag name used for the dynamic component is the value that’s returned for the given constructor.
Similar to a regular LWC custom element, the dynamic component is created and attached to the DOM. If the dynamic component’s constructor changes, the existing element is removed from the DOM.
In the example below, the following HTML is rendered after the import completes.
To use this capability, you must set the apiVersion property to 55.0 or later and have Lightning Web Security enabled for your org.
Key features of dynamic components
Easy UI configuration: Dynamic components for LWC allow for easy configuration by exposing properties that can be set at runtime. This flexibility empowers administrators and non-technical users to customize the application interface without the need for extensive coding.
Reuse and easily maintain components across apps: By creating reusable dynamic components, developers can build their backend once and build a customized UI while maintaining consistency across applications that are easily adapted to different use cases or scenarios. This reduces the need for duplicating code or building multiple variations of similar components.
Enhanced user experience: Dynamic components enable administrators to create dynamic and adaptable UIs. Components can be added, removed, or rearranged within an application’s layout, providing users with personalized experiences tailored to their specific needs.
Get started today with Dynamic Components for LWC
To get started with Dynamic Components for LWCs, developers can refer to the updated documentation and developer guide. There, you’ll find detailed information on creating dynamic components, configuring properties, and integrating them seamlessly into your LWC applications. Additionally, if you like learning by watching someone live code, we encourage you to watch this codeLive episode.
The introduction of dynamic components support for LWCs marks an exciting milestone for the Salesforce ecosystem. This new feature opens up a world of possibilities for customization, ensuring that your Salesforce applications meet the unique needs of your users.
We’re thrilled to bring this powerful capability to the LWC framework and can’t wait to see the innovative solutions our developer community will create with dynamic components. Stay tuned for more updates and resources as we continue to expand the capabilities of LWCs to empower you on your Salesforce journey.
About the author
Alice Oh is a Director of Product on the Lightning Platform team, where she owns Lightning Components, Lightning Out, Lightning Web Runtime, and other backend services that enable reusable, customizable experiences across the Salesforce ecosystem. In her free time, she bikes around the Bay Area in search of the flakiest croissants.