Repository: wagtail/wagtail
File: client/src/controllers/TeleportController.ts (TypeScript)

Code before:
      // outerHTML, beforebegin, or afterend modes.

      // So, we move the cloned DocumentFragment from the template into the DOM
      // using node-based operations instead. This would execute any scripts in
      // the template, and allows the template to contain any type of content
      // (including text nodes).
      switch (this.modeValue) {
        case TeleportMode.outerHTML:
          target.replaceWith(this.templateFragment);
          break;
        case TeleportMode.innerHTML:
          target.innerHTML = '';
          target.append(this.templateFragment);
          break;
        case TeleportMode.textContent:
          target.textContent = this.templateFragment.textContent;
          break;
        case TeleportMode.beforebegin:
          target.parentElement?.insertBefore(this.templateFragment, target);
          break;
        case TeleportMode.afterbegin:
          target.prepend(this.templateFragment);
          break;
        case TeleportMode.beforeend:
          target.append(this.templateFragment);
          break;
        case TeleportMode.afterend:
          target.parentElement?.insertBefore(
            this.templateFragment,
            target.nextSibling,
          );
          break;
        default:
          target.append(this.templateFragment);
          break;
      }

      this.dispatch('appended', { cancelable: false, detail: { target } });
      completed = true;
      if (this.keepValue) return;
      this.element.remove();
    };

    const event = this.dispatch('append', {
      cancelable: true,
      detail: { complete, target },
    });

    if (!event.defaultPrevented) complete();
  }


Review comment (refactor):
I don't quite recall what happened between a8bf1ab868b2a74e99702e6c3a04325e8c97f023, 2003e14a957d783e1a308765082b8d269c08b16c, and bb3e58abd041f8b36cc182394d2f6add25a72064, but apparently this doesn't really have any effect in the current code.

If you copy over the `it('should run inline scripts contained in the template content'` test case from this PR to the current `main` and remove this line, the inline script will still be executed.

The function works by creating a new script element that replaces the original one, which would be executed... if the new script was put into the main DOM (which would've happened if the original script was in the DOM).

However, at the time this getter is executed, the template content hasn't been put into the DOM, so this line doesn't really have any effect.

After some manual testing, I found that inline scripts will still be executed if you use DOM-based operations like `.append()`, so that might be why the current code works just fine:

https://github.com/wagtail/wagtail/blob/6dc93696f8c87d218ff48f28c33e13e6008a3d37/client/src/controllers/TeleportController.ts#L52

For the same reason (and a few others), I decided to remove this line and let the browser execute the scripts when the template content is put into the DOM via `append()` & co.

Code after:
      // to select the exact scripts that were in the template when using
      // outerHTML, beforebegin, or afterend modes.

      // So, we move the cloned DocumentFragment from the template into the DOM
      // using node-based operations instead. This would execute any scripts in
      // the template, and allows the template to contain any type of content
      // (including text nodes).
      switch (this.modeValue) {
        case TeleportMode.outerHTML:
          target.replaceWith(this.templateFragment);
          break;
        case TeleportMode.innerHTML:
          target.innerHTML = '';
          target.append(this.templateFragment);
          break;
        case TeleportMode.textContent:
          target.textContent = this.templateFragment.textContent;
          break;
        case TeleportMode.beforebegin:
          target.parentElement?.insertBefore(this.templateFragment, target);
          break;
        case TeleportMode.afterbegin:
          target.prepend(this.templateFragment);
          break;
        case TeleportMode.beforeend:
          target.append(this.templateFragment);
          break;
        case TeleportMode.afterend:
          target.parentElement?.insertBefore(
            this.templateFragment,
            target.nextSibling,
          );
          break;
        default:
          target.append(this.templateFragment);
          break;
      }

      this.dispatch('appended', { cancelable: false, detail: { target } });
      completed = true;
      if (this.keepValue) return;
      this.element.remove();
    };

    const event = this.dispatch('append', {
      cancelable: true,
      detail: { complete, target },
    });

    if (!event.defaultPrevented) complete();
  }