Lightning Component

Salesforce Lightning Component Inside Lightning Web Component Using Visualforce Page

Why we need this feature:

In our business, If we want to invoke a lightning web component on a visualforce page that has a parameter according to lightning component that is also combined in the same VF or its vice versa then this article will guide you to pass variables in bi-directional ways from LWC to LC or LC to LWC. In this article, we’re just using a constructor/connectCallback/initialization method to pass variables.

1. Lightning web component:-  In our lightning web component we’re using CustomEvent that will fire in JS Controller connectedCallback and listen in VisualForce Page using document.addEventListener("uploadevent", function(event){}. We’re using the ‘@api’ decorator variable to get value from the lightning component.

message='This is LWC for visualforce page';
    @api messageFromLc;   
        var selectedEvent = new CustomEvent('uploadevent', { detail:  {msg :this.message},
        bubbles: true,
        composed: false,
    console.log('message in lwc'+this.message);
    // Dispatches the event.

For more information about bubbles and composed 

dont miss out iconDon't forget to check out: Salesforce Lightning Aura Components Core Concepts

2. Lightning Component:- In our lightning component we’re using aura:registerEvent tag to register our event that will fire after the JS Controller doInit method invoked and listen in VisualForce Page using $A.eventService.addHandler. We’re using the aura attribute variable with access public to get value from the lightning web component.

Cmp File
 <aura:attribute name="currentUserName" type="string" />
    <aura:attribute access="public" name="messageFromLWC" type="string" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:registerEvent name="vfEvent" type="c:sendDataLCtoVF"/>
JS Controller
fireEvent : function(component, event, helper) {
    var myEvent = $A.get("e.c:sendDataLCtoVF");
        currentUserId: component.get('v.currentUserName')
},doInit: function(component,event,helper){
    var action = component.get('c.fireEvent');

3. Aura Application:- As we’re using VF Page to embed our Lightning Component inside Lightning Web Component. We need an aura application that fulfills this requirement.
<aura:application extends="ltng:outApp" access="global">
    	<aura:dependency resource="c:displayMessageOnLC"/>
    <aura:dependency resource="c:lcCommunicateWithLWC"/>

dont miss out iconCheck out another amazing blog by Prafull here: Drag and Drop Address Field on Google Map | Salesforce Help Guide

4. VisualForce Page :- In VF Page we’re using <apex:includeLightning /> and $Lightning.use to embed both LC & LWC.

  • Firstly we’re invoking LC (But not displaying) that will pass the LC message to LWC using  $A.eventService.addHandler({})
    $Lightning.use("c:LWCTOVF", function() {
        $Lightning.createComponent("c:lcCommunicateWithLWC", {
    }, "TempLC", function(cmp) {
            "event": "c:sendDataLCtoVF", "handler": retriveEventData});

    Now, In retriveEventData we’re invoking our LWC once it gets a message from LC. We also need to run once that’s why displayLWC variable used.

    var displayLWC; function retriveEventData(event) {
        if(displayLWC !== event.getParam("currentUserId")){
            $Lightning.createComponent("c:displayMessageOnLC", {
                "messageFromLc": event.getParam("currentUserId")
            function(cmp) {
            var userId = event.getParam("currentUserId");
            document.getElementsByClassName("Id")[0].innerHTML ='Login User ID: '+ userId; 
  • Once our LWC is called and displayed on UI our document.addEventListener is invoked and passes the LWC message to LC using event.detail.msg and then we’re displaying correct LC on UI by invoking checkLC method in JS.
    function checkLC(){
        $Lightning.createComponent("c:lcCommunicateWithLWC", {
        function(cmp) {


Popular Salesforce Blogs