In a Blazor Server (.NET Core 6) application, I have this test html/head/script element:

<script type="text/plain" data-consent-category="google" defer>
    alert("Google Analytics loaded");
</script>

When a user presses a consent button, a piece of code is executed:

function ApplyPreferencesAbbreviatedCode() {
    let activatableScriptTags = document.querySelectorAll("script[type='text/plain']");
    activatableScriptTags.forEach(element => {
        let requiredCategory = element.getAttribute("data-consent-category");
        let clonedElement = element.cloneNode(true);
        clonedElement.setAttribute("type", "text/javascript");
        element.parentElement.insertBefore(clonedElement, element.nextSibling);
        element.remove();
    });
}

This works fine in Edge but does nothing in Firefox. How can I dynamically load scripts in a way that works in Blazor Server/Firefox (it should work with script elements with and without a src attribute).

Note: not having the defer attribute will cause the element to be stripped by Blazor Server (although it is supposed to not have any semantics when there is no src attribute as well).