Dispatch event is not propagating to parent LWC

Question

There are 3 data providers,

OrderDataProvider (available at Page level),

OrderDeliveryGroupsDataProvider (dependent on OrderDataProvider property -> DeliveryGroups),

OrderLineItemsDataProvider (dependent on OrderDeliveryGroupsDataProvider property -> lineItems)

Now I am dispatching the event from OrderLineItemsDataProvider and receiving it in OrderDataProvider

This is the code for OrderDataProvider Side

const ORDER_LINE_ITEMS_FIELDS_UPDATED = 'orderLineItemsFieldsUpdated';
private _handleOrderLineItemsFields: (event: Event) => void = this.handleOrderLineItemsFields.bind(this);
connectedCallback(): void {
    this.addEventListener(ORDER_DG_FIELDS_UPDATED, this._handleOrderDeliveryGroupsFields);
    console.log("Add event listener in Order DataProvider");
    this.addEventListener(ORDER_LINE_ITEMS_FIELDS_UPDATED, this._handleOrderLineItemsFields);
}

disconnectedCallback(): void {
    this.removeEventListener(ORDER_DG_FIELDS_UPDATED, this._handleOrderDeliveryGroupsFields);
    console.log("Remove event listener in Order DataProvider");
    this.removeEventListener(ORDER_LINE_ITEMS_FIELDS_UPDATED, this._handleOrderLineItemsFields);
}
    handleOrderLineItemsFields(event: Event): void {
    event.stopPropagation();
    const fieldsToFetch = [...this._fields, ...((event as CustomEvent).detail?.fields || [])];
    console.log('Inside Order Data Provider Event HANDLER OLI ', JSON.stringify(fieldsToFetch));
    if (fieldsToFetch.length > 0 && !deepEqual(this._fields, fieldsToFetch).value) {
        console.log('updating fields');
        this._requiredFields = fieldsToFetch;
    }
}

This is the code for OrderLineItemsDataProvider

@track _fields: string[] = [];
@api
// @ts-ignore : 'sfdcFields' is defined as a property in class 'DataProvider', but is overridden here in 'OrderLineItemsDataProvider' as an accessor.
// ToDo - Remove ts-ignore once TypeScript supports overridding property with an accessor.
get sfdcFields(): string[] {
    return this._fields;
}
set sfdcFields(builderExpression: string[]) {
    // console.log('Order Line Item sfdcFields ', JSON.stringify(builderExpression));
    // Map and filter the builder expression to format and set the SFDC fields
    this._fields = builderExpression
        .map((field: string) => {
            if (!field.includes('.') && !field.includes('_data')) {
                field = `OrderItemSummary.${field}`;
            }
            field = field
            .replace(/^(fields\.)/, 'OrderItemSummary.')
            .replace('product.fields', 'Product2')
            .replace('product', 'Product2')
            .replace('.text', '');
            return field;
        })
        .filter((field: string) => field !== '_data' && field !== '');

    if (!import.meta.env.SSR) {
        console.log("Firing Event");
        console.log('Order Line Item sfdcFields ', JSON.stringify(this._fields));
        this.dispatchEvent(
            new CustomEvent(ORDER_LINE_ITEMS_FIELDS_UPDATED, {
                bubbles: true,
                composed: true,
                detail: {
                    fields: this._fields,
                },
            })
        );
        console.log("Event Fired");
    }
}

I have verified using console.log() statements that it is working absolutely correct in Experience Builder Console Logs, but during Runtime (Buyer Site) its seems that the event is not propagating to the OrderDataProvider,

PS: I have already tried with composed: true, but that also didn't work,

Below is the SS for runtime logs,

Below is the SS from Experience Builder

Answer 1

Since the components are directly placed on the pages and does not share any direct relation. The event propagates up in the dom hierarchy which appears to be the issue here.

When you do this.addEventListener, the listener gets attached to the component element and if you see DOM hierarchy for the publisher, the subscriber will not be there at all. Because they acts as sibiling components.

Instead this, if you attach listener to window element. You would be able to listen to those event ( considering they propagates up to the root of the DOM ). For simple use cases, if you replace with,

connectedCallback(): void {
    window.addEventListener(ORDER_DG_FIELDS_UPDATED, this._handleOrderDeliveryGroupsFields);
    console.log("Add event listener in Order DataProvider");
    window.addEventListener(ORDER_LINE_ITEMS_FIELDS_UPDATED, this._handleOrderLineItemsFields);
}
disconnectedCallback(): void {
    window.removeEventListener(ORDER_DG_FIELDS_UPDATED, this._handleOrderDeliveryGroupsFields);
    console.log("Remove event listener in Order DataProvider");
    window.removeEventListener(ORDER_LINE_ITEMS_FIELDS_UPDATED, this._handleOrderLineItemsFields);
}

but i would recommend using some state management store like Redux to handle these data communications for complex scenarios. Try example from this SE answer to understand how event propagates.