Disclaimer: I have found a working solution, this question is more of a RFC from a frontend newbie to the more experienced folks to see if there may a better solution and/or issues with the workaround I've come up with. According to etiquette in meta.stackexchange it is not perfect but permissible.

Background: I am making a custom element, and have set custom-named events for attaching particular event listeners. I am triggering those events upon registering click's on specific elements in the shadow DOM. The original code looks like:

// {this} points to the custom element class-object
//custom-named event
    evtSelect = new PointerEvent('select',
    {
        detail: {},
        bubbles: true,
        cancelable: true,
        composed: true,
    })

//synthetic dispatch element method
    select(event){
        this.setAttribute("selected","")
        this.dispatchEvent(this.evtSelect)
    }

//primary event listener
        this.shadowRoot.querySelector(`#slot-id`).addEventListener('click', this.select.bind(this))

When I add an event listener on the custom element for select, the synthetic event dispatch is correctly detected, but upon querying select.ctrlKey within the callback, it returns false regardless of the actual state of the Control key being pressed. In fact, it seems to capture no state whatsoever (including other modifier keys or cursor coordinates, for example). While I can statically set the state of the ctrlKey property on creating the event, what I am looking for is a way to query the actual state upon dispatching.

Fumbling around I've managed to get a working solution by changing the code to this:

//custom-named stored event is discarded entirely in favor of the following

//synthetic dispatch element method
    select(event){
        this.setAttribute("selected","")
        //here I create the event dynamically and anonymously, passing the originally triggering 'click' event as the source object to 'inherit' its state.
        this.dispatchEvent(new PointerEvent('select', event))
    }

//primary event listener
        this.shadowRoot.querySelector(`#slot-id`).addEventListener('click', (event)=>{this.select(event)})

My main concern with the working solution is that I may be inadvertendly creating a memory leak, as I'm unsure to what would be the scope of dynamically creating and dispatching an event in one go or where/if it may be latching on to some other scope, thus making itself reachable and not garbage-collectable, scaling up to a custom element that by function will be instanced many times. Second to that, I've found no hint in my searches of anyone facing this issue or any tutorial regarding this use-case, so I'm listening if there is a proposal for a more elegant solution.