I am creating a WYSIWYG editor and am trying to dispatch a pair of CompositionEvents (compositionstart and compositionupdate). The editor utilizes a private document model, and each key event is processed and recorded in said document model. After the key recording, if needed (depending on cross element selections, and the start/end elements selected), I may need to redraw an element, or a portion of an element.

The thinking is to capture the user's CompositionEvents, process the changes to the document model and elements, and then dispatch a copy of the user's CompositionEvents. Here is the code I have written (currently the events are hard-coded; I'm just testing a proof of concept):

var compStart = new CompositionEvent('compositionstart', {
  bubbles:true,
  cancelBubble:false,
  cancelable:true,
  composed:true,
  data:"",
  returnValue:true,
  view:window,
});
var compUpdate = new CompositionEvent('compositionupdate', {
  bubbles:true,
  cancelBubble:false,
  cancelable:true,
  composed:true,
  data:"´",
  returnValue:true,
  view:window,
});
document.querySelector('client-control-wysiwyg').dispatchEvent(compStart);
document.querySelector('client-control-wysiwyg').dispatchEvent(compUpdate);

The event listeners fire when these event are dispatched, but the character "´" never appears in the element.

These two events are identical to those that are created when I type the keyboard combo Option + E on my Mac, with the exception of isTrusted, which is expected as these are being manually triggered.

Is it possible to dispatch CompositionEvents?