combining capture once passive and signal

I’ve been working on a complex event-driven system where I’m using various options within the addEventListener() method to handle form submissions and control event propagation. Specifically, I’m combining the following options: capture, once, passive, and signal for a custom form handler.

Here is the code im working on

const formData = function () {
  const nameLabel = document.getElementById("element1");
  const countryLabel = document.getElementById("element2");
  const btnHandle = document.getElementById("btn");
  const dataBase = [];
  
  const controller = new AbortController();
  const signal = controller.signal;

  const handleClick = function (event) {
    event.preventDefault();  // Prevent form submission
    
    const formEntry = {
      name: nameLabel.value,
      country: countryLabel.value
    };
    
    dataBase.push(formEntry);
    console.log('Form Data Submitted:', dataBase);
    
    // Abort listener after event triggered if `once` is true
    if (options.once) {
      controller.abort();
    }
  };

  const options = {
    capture: true,   // Event captured before DOM propagation
    once: true,      // Event listener removed after being triggered once
    passive: false,  // Allows preventDefault() to be called
    signal: signal,  // Aborts event listener when controller.abort() is called
    useCapture: true // Ensures event is handled in the capturing phase
  };

  btnHandle.addEventListener("click", handleClick, options);
  
  // Abort the listener programmatically after 10 seconds
  setTimeout(() => {
    controller.abort();
  }, 10000);
};

formData();

How do subtle interactions between capture, passive, once, and signal manifest in complex event-driven architectures, particularly when dealing with nested components, asynchronous event handling, and reactivity frameworks (e.g., React or Vue)?

I’m particularly interested in understanding how these edge cases might lead to performance bottlenecks, event handling inconsistencies, or missed cleanup actions in applications using virtual DOMs or reactive data bindings. Have there been observed real-world cases where these configurations resulted in unexpected behavior, such as listeners being prematurely removed or default actions being inconsistently triggered across nested elements?