Use Components Outside Salesforce with Lightning Out 2.0

Embed custom Lightning web components (LWC) into external, non-Salesforce apps by using Lightning Out 2.0, a special Salesforce app that you create and configure in Setup. Use the generated markup to embed the app into a page of your company’s external app. Unlike Lightning Out (beta), Lightning Out 2.0 is built on Lightning Web Runtime (LWR) and encapsulates embedded components in iframes within a shadow DOM. This new approach keeps the components more secure while still allowing for fast and responsive interactions with the external app.

To get started, review these topics.

Understand Lightning Out 2.0 Architecture

Learn how Lightning Out 2.0 provides access to Salesforce on external host pages while securely encapsulating embedded Lightning web components (LWCs). Examine the Lightning Out 2.0 app code and understand how the elements interact with each other and the host page.

Set Component Styles and Properties in a Lightning Out 2.0 App

Tailor your Lightning Out 2.0 app to the specific branding requirements of an external app. Set Cascading Style Sheets (CSS) custom properties, including Salesforce Lightning Design System (SLDS) styling hooks, as style attributes directly in the context of the external app. You can also set or override values on other properties defined for your custom LWC components.

Handle Lightning Out 2.0 App Events

Lightning Out 2.0 app components load in iframes instead of directly on the host page. To overcome communication restrictions across iframe boundaries, Lightning Out 2.0 wraps custom events in messages using window.postMessage(). This internal implementation allows event listeners on one side of the iframe boundary to detect events dispatched from the other side. From your perspective, events are still created and handled with the standard EventTarget and CustomEvent interfaces.

Lightning Out 2.0 Limitations

Be aware of current Lightning Out 2.0 limitations.

How Lightning Out 2.0 Compares to Lightning Out (Beta)

Lightning Out 2.0 is generally available. It’s a new feature that completely replaces—and isn’t an extension of—Lightning Out (beta), which is still subject to Beta Service Terms. Learn how the architecture and features currently available in Lightning Out 2.0 compare to those in Lightning Out (beta). The feature comparison list is updated as more Lightning Out 2.0 features are added.