As you know Salesforce introduced Lightning web components in Spring 19 release and with that the existing Lightning components are renamed as Aura components. So, the question lies how does Aura components and Lightning web components coexist in the same space and here we are to discuss the same. One thing is for sure – Aura components and Lightning web components can co-exist and work together in many different ways.
Coexistence
If you’re looking to use Aura components and Lightning web components together in your applications then there are two strategies to consider: Nested and Side-by-side compositions.
Nested Composition
A nested composition is a component within a component, either an Aura component or Lightning web component. This is like a parent-child relationship. The rule is you can have both Aura components and Lighting web components inside a parent Aura component, but Lightning web components can only contain other Lightning web components.
In the above ‘nested composition’ example, the Aura component has two child components: another Aura component and a Lightning web component.
The other parent, Lightning web component, also has two children. Both children are Lightning web components.
Remember – Aura component is the ultimate parent.
Side-by-side Composition
The other type of composition is side-by-side in which Aura component and Lightning web component are not within the same hierarchy but are placed separately in a Lightning App Page as shown below.
Here the parent Aura component and the parent Lightning web component are in Side-by-Side strategy. And within the parent Aura component and the parent Lightning web component, the strategy used is nested composition.
How do they work together?
Now that we have seen the different ways the components can co-exist within a single Lightning App Page, let’s look at how they talk between themselves in both nested and side-by-side arrangement using the above example.
-
- Aura component: The parent aura component can interact directly with child component attributes whether those are standard Aura events or custom Aura event bundles.
- Lightning web component: The parent Lightning web component can send and receive information through JavaScript CutomObject objects, as well as interacting with child component methods and properties exposed through public APIs.
Both Aura and Lightning web components can send and receive data through the Lightning Data Service (LDS) and the User Interface API.
Limitation: A mechanism for communication between Aura components and Lightning web components that aren’t in the same component hierarchy isn’t provided by the platform yet! But this will be soon available in Lightning Event Service as highlighted in the images above.
