Compose Aura Components from Lightning Web Components
You can compose Aura components from Lightning web components, but not the other way around. To communicate down the hierarchy, parents set properties on children. To decide when and how to nest a Lightning web component in an Aura component, it’s important to understand facets and slots.
In an Aura component, to refer to either Aura components or Lightning web components, use camel case with a colon separating the namespace and the component name.
This Aura component is composed of lightning:card, which is a base Lightning component, and c:lwcHelloWorld, which is a Lightning web component.
The lwcHelloWorld code displays a classic greeting. (It also references the lightning-card component. Most base Lightning components are available as Aura and LWC.)
The component has a public name property, which the Aura component sets using the name attribute.
In the trailheadapps/pure-aloe sample app, see the Aura irrigationWrapperManager component, which sets properties on the child irrigationManager Lightning web component.
In Aura components and Lightning web components, you can add components into the body of another component. In Aura, you add components into facets. In Lightning web components, you add components into slots.
In Aura, the body attribute is a facet. A facet is any attribute of type Aura.Component[], which is just a fancy way of saying you can set an array of components for the attribute.
In even less fancy terms, think of a facet as a sandwich. You can stuff as many ingredients (components) as you’d like into your sandwich (facet).
You’re probably hungry for more information and maybe even lunch after reading about facets in Aura. Now, let’s see where facets factor into whether you decide to build an Aura component or a Lightning web component.
If you’re building a new Lightning web component that expects other subcomponents in its body, those subcomponents must also be Lightning web components. Remember that Lightning web components can’t contain Aura components.
Imagine a Lightning web component that’s the outermost component in a tree of nested components. Think of the Lightning web component as the biggest doll in a matryoshka doll, also known as a Russian nesting doll. A matryoshka doll contains a set of nested dolls, each containing a smaller doll. If the biggest doll is a Lightning web component, none of the smaller nested dolls can be an Aura component.
Consider a c-wrapper Lightning web component that allows other components in its body. The <slot> tag is a placeholder that an owner component can pass markup into.
The c-app Lightning web component passes a lightning-card component into the slot.
If a Lightning web component contains a slot, you can nest it in an Aura component but you can't use the slot.
To call a method defined in a Lightning web component from an Aura component, give the Lightning web component an aura:id and use cmp.find(), just as you do to reference an Aura component. For example, cmp.find('childLwc').childLwcMethod().
Lightning web components aren’t created until your Aura component renders. You can’t invoke a method on your Lightning web component before that time (for example, during your Aura component's initialization).
See Also