Adding attributes to element after load does not add overlays in edit mode

Description

Steps to reproduce:
1. Add the following code at the end of the body tag i _Root.cshtml in the alloy templates:

        <h2 id="editable">
            This element has the edit attributes added after load and should be editable after 1 second.
        </h2>
        <script>
            window.addEventListener("load", function () {
                var element = document.createElement("h2");
                element.innerText = "This element is dynamically created and should be editable after 1 second";
                document.body.appendChild(element);
                var editableElement = document.getElementById("editable");
                setTimeout(function() {
                        element.setAttribute("data-epi-property-name", "name");
                        element.setAttribute("data-epi-property-render", "none");
                        element.setAttribute("data-epi-property-edittype", "floating");
 
                        editableElement.setAttribute("data-epi-property-name", "name");
                        editableElement.setAttribute("data-epi-property-render", "none");
                        editableElement.setAttribute("data-epi-property-edittype", "floating");
 
                }, 1000);
            });
        </script>
    </body>

2. Go to edit mode on the start page of the alloy templates.

Expected:
To have an overlay that opens up editing of the page's name when clicked on it on the two bottom elements on the page

Actual:
No overlay for the two elements at the bottom.

Beta features need to be enabled in order for the change to be visible. Add

<add name="EPiBetaUsers" type="EPiServer.Security.AuthenticatedRole, EPiServer.Framework" />

to providers in web.config.
https://world.episerver.com/documentation/Items/Installation-Instructions/beta-features/