LWC event listeners not responding

Question

I have an LWC child component that is dispatching a custom event as such:

        console.log('bw: fire saveslotclick custom event');
        //fireCustomEvent(this, 'saveslotclick', { slot: this.editedSlot });
        let customEvent = new CustomEvent('saveslotclick', {
            detail: this.editedSlot,
            bubbles: true,
            cancelable: true
        });
        console.log('bw: customEvent = ' + JSON.stringify(customEvent, null, 4));
        this.dispatchEvent(customEvent);

I have the listener wired up in the parent as such:

        <div onsaveslotclick={handleSaveSlotClick}>
            <c-child></c-child>
        </div>

code behind parent:

    handleSaveSlotClick = (event) => {
        console.log('bw: parent heard saveslotclick custom event');
        event.stopPropagation();
        this.startTime = new Date();
        this.isLoading = true;
        this.saveShift(event.detail.slot);

        this.renderSlot = false;
    }

The console output shows: bw: fire saveslotclick custom event, but does NOT show: bw: parent heard saveslotclick custom event

This event logic has worked for over a year in production, but in a new sandbox no events seem to be firing or being heard.

Any idea what is going on here?

EDIT:

The event is bound to the parent div because the components are nested like so:

<template>
    <!-- parent -->
    <div onsaveslotclick={handleSaveSlotClick}>
        <c-child-view>
            <c-grandchild-view>
                 <c-great-grandchild-view>
                    <c-great-great-grandchild-view>
                        <!-- event is fired here -->
                    </c-great-great-grandchild-view>
                </c-great-grandchild-view>
            </c-grandchild-view>
        </c-child-view>
    </div>
</template>

This has been working for over a year and event bubbling should correctly trigger the listener. So I am wondering if there is a lightning setting introduced that may have changed this behavior.

EDIT: added console.log of customEvent...

bw: customEvent = {
    "isTrusted": false,
    "composed": false,
    "detail": {
        "allowDelete": false,
    },
    "type": "saveslotclick",
    "target": null,
    "currentTarget": null,
    "eventPhase": 0,
    "bubbles": true,
    "cancelable": true,
    "defaultPrevented": false,
    "timeStamp": 19182.09999999404,
    "srcElement": null,
    "returnValue": true,
    "cancelBubble": false,
    "path": [],
    "NONE": 0,
    "CAPTURING_PHASE": 1,
    "AT_TARGET": 2,
    "BUBBLING_PHASE": 3
}

Answer 1

you should add event to component not to div

 <div>
    <c-child onsaveslotclick={handleSaveSlotClick}></c-child>
 </div>

i think your customevent constructor not happens successfully, if u add console.log statement before dispatch you 'll see errors. i guess because cancelable is read only property https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable

if you don't mind what scenario's force you to add bubbles & cancelable ?

i removed both of then it's works for me.