LWC event listener in head markup

Question

I'm an analyst working with a developper to receive some values from a LWC. We are trying to pass values through dispatch/listener, but the eventlistener is not triggered.

The end goal will be to some values from the LWC through to Google Tag Manager.

In the LWC we have:

@api Name_Label; 
@api Title_Label;
@api Call_Label;
@api Video;
@api Close;
@api Background_image;
dispatchEvent;



//Boolean tracked variable to indicate if modal is open or not default value is false as modal is closed when page is loaded 
@track isModalOpen = false;
openModal() {
    // to open modal set isModalOpen tarck value as true
    this.isModalOpen = true;

    this.dispatchEvent(new CustomEvent("updateGTMdataLayer", { "detail" : { data: "test"} }));
}
closeModal() {
    // to close modal set isModalOpen tarck value as false
    this.isModalOpen = false;
}
submitDetails() {
    // to close modal set isModalOpen tarck value as false
    //Add your code to call apex method or do some processing
    this.isModalOpen = false;
}
}

Then I have placed in the head markup this script to log into the console that the event triggered.

<script>
document.addEventListener('updateGTMdataLayer', function(e){ console.log("updateGTMdataLayer")});
</script>

Can someone care to help?

Thanks

Answer 1

I believe the issue you're experiencing is related to LWC's shadow DOM.

Every web component’s DOM is encapsulated in a shadow DOM that other components can’t see. When an event bubbles (bubbles = true), it doesn’t cross a shadow boundary unless you configure it to (composed = true).

Try updating the event object to:

{ detail: { data: "test" }, bubbles: true, composed: true }

I found this quote from this resource: How Events Bubble in Lightning Web Components

Good luck!