Dynamic loading of a web component fails with 'Error Application ROOT-2521314 already initialized'

I’ve implemented dynamic loading of a web component inside a Vaadin 23.2 view, the commit is here: https://gitlab.com/mrts/vaadin-embedding-example-guestbook/-/commit/b091d08c1038264f25b6f2c725652297852494ce.

It is also pasted below.

When I click the Load web component button
Expected: the web component is loaded and displayed on the page.
Actual: the custom element is loaded and registered successfully, but rendering fails with the error Application ROOT-2521314 already initialized:

Loading custom element guest-book   dynamic-webcomponent-loader.ts:37:16
registering <guest-book> using id GuestBook-0   guest-book.js:112:13
Processing time was 2ms   FlowClient.js:205:19
Uncaught Error: Application ROOT-2521314 already initialized
    initApplication   FlowBootstrap.js:93

How can I avoid the error?

Static loading of the web component works, see https://gitlab.com/mrts/vaadin-embedding-example-guestbook/-/blob/master/src/main/webapp/basic.html.

Here’s the code of the web component:

@customElement('dynamic-webcomponent-loader')
export class DynamicWebcomponentLoader extends LitElement {

    render() {
        return html`
            <vaadin-vertical-layout style="width: 100%; height: 100%; margin: var(--lumo-space-m);" theme="spacing-xs">
                <vaadin-button tabindex="0" id="loadWebComponent">
                    Load web component
                </vaadin-button>
                <div id="content"></div>
            </vaadin-vertical-layout>
        `;
    }

    registerAndLoadCustomElement(name: string) {
        const src: string = `/web-component/${name}.js`;
        const scriptId: string = `${name}-script`;

        console.log(`Loading custom element ${name}`)

        // Dynamically insert the element and script if they don't already exist.
        if (!document.getElementById(scriptId)) {
            const script = document.createElement('script');
            script.src = src;
            script.id = scriptId;
            document.body.appendChild(script);

            const element: HTMLElement = document.createElement(name);
            document.getElementById("content")?.appendChild(element);
        }
    }
}

The registerAndLoadCustomElement() function is invoked at server side as follows:

@Route("dynamic-loader")
@Tag("dynamic-webcomponent-loader")
@JsModule("./src/dynamic-webcomponent-loader.ts")
public class DynamicWebcomponentLoader extends LitTemplate {

    @Id("loadWebComponent")
    private Button loadWebComponent;

    public DynamicWebcomponentLoader() {
        loadWebComponent.addClickListener(buttonClickEvent ->
                getElement().callJsFunction("registerAndLoadCustomElement", "guest-book"));
    }
}

I filed and issue in GitHub regarding this: https://github.com/vaadin/flow/issues/15263, let’s continue the discussion there.