custom event in do not bubble by default, one has to set bubbles true

bubbles-must-be-set-for-custom-events.js

const customEventHandling = () => {
    document.addEventListener('this-is-my-custom-event', (event) => {
        console.log('THIS SHOULD PRINT ON DISPATCHED EVENT!');
        console.log(event)
    });

    document.onreadystatechange = () => {
        if (document.readyState !== "complete") {
            console.log('not ready yet');

            return;
        }

        console.log('before dispatch');
        const event = new Event('this-is-my-custom-event', {bubbles: true});
        const element = document.querySelector('body');

        console.log('event i want to dispatch', event);
        console.log('element i dispatch the event on', element);
        element.dispatchEvent(event);
        console.log('after dispatch');
    };
}

customEventHandling();