Call Lightning Web Component From a Quick Action in Salesforce

In Lightning, still, you can't call an LWC component from quick action straightforwardly. An LWC component should be wrapped inside an Aura Component and Aura Component will be alluded to in Quick Action override.

You can directly insert an LWC segment inside an Aura Component like this.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
 <c:lwcDataTable recordId="{!v.recId}"/>
</aura:component>

However, there are scenarios where you need to open an LWC component in full screen or in various tabs. At that point, you can't utilize this immediate strategy. You need to utilize Lightning:Navigation for this, however, the issue is Lightning:UrlAddressable isn't accessible in Lightning Web Component. So you can't utilize Lightning:Navigation to explore from the Aura Component to the LWC part. 

To do this first we will make an Aura Component that will be called when fast activity is called. 

TestAuraComponent.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <lightning:navigation aura:id="navService"/>    
    <aura:handler name="init" value="{!this}" action="{!c.init}"/> 
</aura:component>

Don't forget to check out: Salesforce Lightning Web Components Open Source Version (OSS)

Test Aura ComponentController.js

({
    init : function(cmp, event, helper) {
        var navService = cmp.find("navService");
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__TestAuraComponent2'
            },
            state : {
                c__recordId : cmp.get('v.recordId')
            }
        };        
         navService.navigate(pageReference);
    }
})

TestAuraComponent will utilize lightning:navigation administration to explore TestAuraComponent2. It will likewise pass recordId to TestAuraComponent2. 

TestAuraComponent2.cmp

<aura:component  implements="lightning:isUrlAddressable"
                access="global" >
    <aura:attribute name="isLoaded" type="Boolean" default="false"/>
    <aura:attribute name="recId" type="String" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:if isTrue="{!v.isLoaded}">
        <c:lwcDataTable recordId="{!v.recId}"/>
    </aura:if>    
</aura:component>

TestAuraComponent2Controller.js

({
    doInit : function(component, event, helper) {
        var id = component.get("v.pageReference").state.c__recordId;         
        component.set("v.isLoaded", true);
        component.set("v.recId", id);
    }
})

TestAuraComponent2 will extract the parameter from the URL and pass it to the LWC component.

Don't forget to check out another amazing blog by Anuj here: Best Practices to Be Followed As a Salesforce Business Analyst

Code this in the LWC component Js file to get recordId.

import { LightningElement, api, wire } from 'lwc'; 
export default class LwcDataTable extends LightningElement {
    @api recordId; 
    connectedCallback()
    {
        alert('This is LWC. Account Id -> ' + this.recordId);
    }
}

Users can directly get recordId using @api decorator.