How do we manually call (child) LWC component method from (parent) Aura component?

Question

I've two components:

<c:Lightning_component_Aura>
  <c:lwcLightningWebComponent aura:id="myLwcComponent" />
</c:Lightning_component_Aura>

I've declared a function inside LWC using @api. Now the documentation says, this method can be called from Parent component but the way they provided is for if parent component is also LWC component.

I would like to call this child LWC component from a parent Aura component. Like we do by provideding a aura:id to an Aura component and find that instance and call the aura method.

Aura Example:

component.find('childComponent').method1();

I tried supplying LWC an aura:id and call the @api method like this but it did not work.

Any suggestions on how to do that?

Answer 1

The public API of LWC components are exposed on the DOM element. The reason why your example doesn't work is because component.find() returns an Aura component instance, which in this case is the abstraction layer used to make LWC compatible with Aura. To access the underlying DOM element of an LWC component, you have to dig it out of the Aura component via the getElement method:

var auraCmp = component.find('childComponent');
var lwcElm = auraCmp.getElement();
lwcElm.method1();

Edit: Invoking the LWC method directly from the Aura component is supported. Both methods will work, but I recommend doing it the Aura way when developing in Aura.