How to use Lightning Web Components in Aura Components

From the project planning standpoint it’s always better to have the new functionality built-in Lighting Web Components when compared to having them built-in Aura Components.

There is a good possibility that you might already have some part of the project broken down into components and built them using Aura Components, so does it mean you should go ahead and migrate that also to Lightning Web Components?

Absolutely No! Well, if you want to do it that way, no one is stopping you. But it’s not a mandate, will tell you why.

Lightning platform is built in such a way that we can embed the LWC components into Aura Components and Visualforce Pages. However, the vice-versa is not possible. We cannot embed Aura Components and Visualforce components into Lighting Web Components.

Let me show you how to embed Lightning Web Components into Aura Components.

Here is the Aura Component.

<aura:component>
   <c:HelloWorldWebComponent meaaage=“HEY!!!” />
</aura:component>

Here is the Lighting Web Component

<template>
</template>

import { LightningElement } from 'lwc';

export default class HelloWorldWebComponent extends LightningElement{

  @api
  message;

}

Am trying to pass the data to the attribute message form Aura Component that am trying to receive in the Lightning Web Component.

Hope this is helpful!