Click Redirector Component

click-redirector.js

(function () {
  const clickRedirectorEventListenerSetKey = Symbol();
  if (!window[clickRedirectorEventListenerSetKey]) {
    window[clickRedirectorEventListenerSetKey] = true;
    window.addEventListener(
      "click",
      (event) => {
        const clickRedirector = event.target.closest("click-redirector");
        const redirectedTarget = document.getElementById(
          clickRedirector?.htmlFor
        );
        if (
          clickRedirector /* click occurred inside click-redirector */ &&
          redirectedTarget !==
            event.target /* click is NOT on the redirected target */ &&
          !event.defaultPrevented /* no previous listener canceled the event */
        ) {
          event.preventDefault();
          event.stopImmediatePropagation();
          redirectedTarget.click();
        }
      },
      { capture: true }
    );
  }
})();

class ClickRedirector extends HTMLElement {
  static observedAttributes = ["for"];
  #htmlFor = "";

  get htmlFor() {
    return this.#htmlFor;
  }
  set htmlFor(val) {
    this.#htmlFor = String(val);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "for" && [this.#htmlFor, null].includes(oldValue)) {
      // don't set if reflection is broken
      this.#htmlFor = newValue;
    }
  }
}

customElements.define("click-redirector", ClickRedirector);