In Salesforce, new Lightning web components (LWCs) can be created and added to projects that already contain Aura components. Alternatively, you can migrate incrementally according to your plan by swapping out specific Aura components in your app for Lightning web components.
Although there are some restrictions, you must be aware of them in order for Lightning web components and Aura components to function together.
Salesforce Lightning web components may be found in Aura components. The opposite, however, is not true.
Naming Components
Use camel case with a colon to distinguish the namespace from the component name when referring to either Aura components or Lightning web components in an Aura component.
lightning:card, a Lightning web component, and c:lwcWgHelloWorld, a Lightning base component, make up this Aura component.
<!– auraWgComponent.cmp file –>
<aura:component implements=”flexipage:availableForAllPageTypes”>
<lightning:card title=”Aura WG Hello World” />
<c:lwcWgHelloWorld name=”White” />
</aura:component>
The code lwcHelloWorld shows a standard salutation. (It also makes mention of the lightning-card element. The majority of fundamental Lightning parts are offered as Aura and LWC.)
<!– lwcWgHelloWorld.html –>
<template>
<lightning-card title=”LWC Wg Hello World” >
<div class=”slds-card__body slds-card__body_inner”>
Hello, {name}!
</div>
</lightning-card>
</template>
The Aura component uses the name attribute to set the component’s public name property.
// lwcWgHelloWorld.js
import { LightningElement, api } from ‘lwc’;
export default class HelloWgWorld extends LightningElement {
@api name;
}
You can add components within the body of another component in Aura and Lightning web components. You may integrate elements into facets in Aura. Additionally, you insert components into slots in Lightning web components.
The body attribute is a facet in Aura. Any attribute of type Aura is a facet. A fancy way of saying you can set an array of components for the attribute is Component[].
Conclusion
In this way, Lightning Aura Components and Lightning Web Components can not only co-exist with each other but can also interact with each other.
To learn more about LWCs, check out some of my related blog below!
Additional Resources
- Configuration of an LWC
- Testing Lightning Web Components
- Salesforce Developers: Lightning Web Components and Aura Components Working Together
Cover Photo by charlesdeluvio on Unsplash
