Динамическая загрузка содержимого из SSR в ванильный JS

У меня есть проект, основанный на Django, который предоставляет различные страницы, рендеримые самим django. Я хочу сделать это одностраничным приложением, поэтому django обслуживает только индекс с полной HTML-страницей, а затем я использую другие конечные точки для рендеринга тела, и я ввожу содержимое на индексную страницу с помощью JavaScript.

Это индексная страница:

{% load static %}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <script type="module" src={% static "js/index.js" %}></script>
</head>

<body>

<div id="root"></div> <!-- index.js has a function that overwrites the contents of this element with the retrieved page -->

</body>

</html>

И пример страницы:

{% load static %}

<script type="module" src={% static "js/page.js" %}></scrip>
<button onclick="helloworld()">
  Click me!
</button>

В файле page.js будут такие функции:


function helloworld() {
    alert("Hello world!");
}

Это достаточно хорошо работает для загрузки содержимого HTML и CSS, но не очень хорошо для всего, что связано с JavaScript. При использовании этого метода любой JS, пришедший в ответе SSR, не будет загружен, а инжектированный HTML не сможет получить доступ ни к одной из JS-функций, загруженных вместе с индексной страницей, если только я не назначу их глобальному объекту, например window или document.

Это затрудняет добавление функциональности для каждой страницы, так как мне приходится добавлять все это в один JS-файл и ""экспортировать"" все через глобальные переменные, что кажется уродливым хаком.

Я знаю о проблемах с атрибутом onclick и о том, что вместо него следует использовать element.addEventListener(), но это тоже не работает, потому что если js загрузится до инъекции страницы, он не найдет элемент для подключения слушателя событий, а если js будет инжектирован вместе со страницей, то он не будет загружен.

Основная проблема заключается в том, что для этого приходится использовать ванильные JS и HTML, в противном случае это, вероятно, не было бы проблемой.

Есть ли способ указать браузеру искать новые добавленные теги сценариев или позволить динамическому HTML-содержимому обращаться к существующим JS-функциям?

Вернуться на верх