Descargo de responsabilidad: he encontrado una solución que funciona, esta pregunta es más un RFC de un novato en la interfaz de usuario a la gente más experimentada para ver si puede haber una mejor solución y/o problemas con la solución alternativa que se me ocurrió. De acuerdo con la etiqueta en meta.stackexchange, no es perfecto pero está permitido.

Antecedentes : estoy creando un elemento personalizado y he establecido eventos con nombres personalizados para adjuntar detectores de eventos particulares. Estoy desencadenando esos eventos al registrar click en elementos específicos en el shadow DOM. El código original se parece a:

 // {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))

Cuando agrego un detector de eventos en el elemento personalizado para select , el envío de eventos sintéticos se detecta correctamente, pero al consultar select.ctrlKey dentro de la devolución de llamada, devuelve falso independientemente del estado real de la tecla Control que se presiona. De hecho, parece no capturar ningún estado (incluidas otras teclas modificadoras o coordenadas del cursor, por ejemplo). Si bien puedo establecer de forma estática el estado de la propiedad ctrlKey al crear el evento, lo que busco es una forma de consultar el estado real al realizar el envío.

Buscando a tientas, logré obtener una solución funcional cambiando el código a esto:

 //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)})

Mi principal preocupación con la solución de trabajo es que puedo estar creando inadvertidamente una pérdida de memoria, ya que no estoy seguro de cuál sería el alcance de crear y enviar dinámicamente un evento de una sola vez o dónde/si puede estar aferrándose a algún otro alcance, haciéndose así accesible y no recolectable, escalando a un elemento personalizado que por función será instanciado muchas veces. En segundo lugar, no he encontrado indicios en mis búsquedas de nadie que se enfrente a este problema ni ningún tutorial relacionado con este caso de uso, por lo que escucho si hay una propuesta para una solución más elegante.