Trying to detach an element from parent that does not have it

I have this code:

void addToSlot(String name, Component... components) {
    for (Component component : components) {
        var element = component.getElement();
        element.setAttribute(AttributeNames.SLOT, name);
        this.getElement().appendChild(element);
    }
}

And it works the first time, but after navigating away and back to the same route I get this exception:

java.lang.IllegalArgumentException: Trying to detach an element from parent that does not have it.
	at com.vaadin.flow.dom.impl.AbstractNodeStateProvider.removeChild(AbstractNodeStateProvider.java:123)
	at com.vaadin.flow.dom.Node.removeChild(Node.java:332)
	at com.vaadin.flow.dom.Element.removeFromParent(Element.java:577)
	at com.vaadin.flow.dom.Node.insertChild(Node.java:249)
	at com.vaadin.flow.dom.Node.appendChild(Node.java:141)
	at it.axians.vaadin.mixins.HasSlots$1.add(HasSlots.java:63)

How can I prevent this?

[cdir]

I have the same problem with a Grid component. The grid is part of a tab sheet using Tabs. To not having all the tab contents in the DOM, I remove all components below grid and only add the one content I need. All components are stored in a map to do not create the whole content every time I switch the tab. Using this approach I get the exception from a component (for example a button) in a cell of the grid after switching to the corresponding tab the second time (first time the grid was added initially, second time it was re-attached).

[heruan]

Some components might be Spring beans in the UI scope. A workaround I’ve found is to use removeFromTree on detach, but I’m not sure if this has side effects.