Handle LWC event in Visual force page

Question

I have overridden Standard "convert Lead" button with a Visual force page. LWC component is inside Visual force page using Lightning out. When I click Cancel button in LWC component, I want to navigate back to lead Page.I'm using custom event in LWC and trying to handle in Visual force page but I'm not able to handle the events in visual force page using addEventListener. Any suggestions please.

VF page

<apex:page showHeader="false"  standardcontroller="lead" sidebar="false">
<apex:includeLightning/> 
<div id="LightningComponentId"/>
<script>
document.addEventListener('CloseLeadConvert', function(event){
    console.log('vf event data window listener =>');
});
$Lightning.use("c:ConvertLeadApp", function(){
 $Lightning.createComponent("c:leadConvert",
{ 
recordId : "{!$CurrentPage.parameters.id}"
},
 "LightningComponentId",
 function(cmp){
console.log('calling LWC component');
   });
 });
</script>
</apex:page>`

Aura app

 <aura:application extends="ltng:outApp" access="GLOBAL">
 <aura:dependency resource="c:leadConvert"></aura:dependency>  
 <aura:dependency resource="markup://force:*" type="EVENT"></aura:dependency> 
</aura:application>

LWC HTML

<template>
<div class="slds-align_absolute-center">
<lightning-button label="Convert" onclick={handleConvert} variant="brand"> </lightning-button>
<lightning-button label="Cancel" onclick={handleCancel} variant="neutral"> </lightning-button>
</div>

</template>

LWC JS

import { LightningElement } from 'lwc';
import { api,wire} from 'lwc'
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Lead.Name'
import COMPANY_FIELD from '@salesforce/schema/Lead.Company'
import convertLead from '@salesforce/apex/ConvertLeadController.convertLead';

export default class LeadConvert extends NavigationMixin(LightningElement) {

@api recordId;
result;

leadRecord;
accountName;
contactName;
opportunityName;

handleConvert(){
convertLead({leadId:this.recordId})
    .then(result=>{
      console.log('inside success');
    })
    .catch(error=>{
      console.log('inside error');
    })
  }

  handleCancel() {
    this.dispatchEvent(new CustomEvent('CloseLeadConvert'));
   
}

}

`

Answer 1

You'll need to add the event listener directly to the LWC, after it has been added to the page. You can do this in the callback to $Lightning.createComponent, and you can query the LWC by its hyphenated component name, just as you would in an LWC.

In your VF Page:

<apex:page showHeader="false"  standardcontroller="lead" sidebar="false">
    <apex:includeLightning/> 
    <div id="LightningComponentId"/>

    <script>
    $Lightning.use("c:ConvertLeadApp", function() {
        $Lightning.createComponent("c:leadConvert", 
            { recordId : "{!$CurrentPage.parameters.id}" },
            "LightningComponentId",
            function(cmp) {
                document.querySelector('c-lead-convert').addEventListener('CloseLeadConvert', function(event){
                    console.log('vf event data window listener =>');
                });
                console.log('calling LWC component');
            }
        );
    });


    </script>
</apex:page>