Lightning Out Dependencies

To describe the components that you want to deploy outside of Salesforce, create a Lightning Out app. A Lightning Out app is a special standalone Aura app defined with the <aura:application> tag. Add components to the app with the <aura:dependency> tag.

This example Lightning Out app uses the myAppComponent Lightning web component in the default c namespace.

To reference a Lightning web component in a Lightning Out app, use the naming convention <namespace:camelCaseComponentName>.

In the Lightning Out app, you must:

  • Set the access control to GLOBAL.
  • Extend the app from either ltng:outApp or ltng:outAppUnstyled.
  • List as a dependency every component that is referenced in a call to $Lightning.createComponent().

In this example, <c:myAppComponent> is the top-level Lightning web component that you create on the origin server using $Lightning.createComponent(). Create a dependency for each component you add to the page with $Lightning.createComponent().

Don’t worry about components used within the top-level component. The framework handles dependency resolution for child components.

A Lightning Out app isn’t a normal Aura app, and you shouldn’t treat it like one. Use it only to specify the components that you want to deploy externally.

In particular, note the following.

  • You can’t add a template to a Lightning Out app.
  • Content that you add to the body of the Lightning Out app won’t render.

You have two options for styling your Lightning Out apps: Salesforce Lightning Design System and unstyled. Lightning Design System styling is the default, and Lightning Out automatically includes the current version of the Lightning Design System onto the page that’s using Lightning Out. To omit Lightning Design System resources and take full control of your styles, perhaps to match the styling of the origin server, set your Lightning Out app to extend from ltng:outAppUnstyled instead of ltng:outApp.

See Also