Lightning Out Dependencies

Create a special standalone Aura dependency app to describe the components to be deployed using Lightning Out.

A standalone Aura dependency app is simply an <aura:application> with a few attributes, and the dependent components described using the <aura:dependency> tag. A standalone Aura dependency app isn’t one you’d ever actually deploy as an app for people to use directly. A standalone Aura dependency app is used only to specify the dependencies for Lightning Out.

This standalone Aura dependency app uses the myAppComponent Lightning web component in the default c namespace.

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

A standalone Aura dependency app must do the following.

  • Set access control to GLOBAL.
  • Extend 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 you are planning to 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 standalone Aura dependency app isn’t a normal Aura app, and you shouldn’t treat it like one. Use it only to specify the dependencies for your Lightning Out app.

In particular, note the following.

  • You can’t add a template to a standalone Aura dependency app.
  • Content you add to the body of the standalone Aura dependency 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 dependency app to extend from ltng:outAppUnstyled instead of ltng:outApp.

See Also