Various components of state can be lost when an element is reparented atomically in javascript. This is a common use case in React, where elements might get shuffled around within one parent element. Discussion in this spec issue.
Clicking the "reparent" button will remove and then immediately re-append the iframe in the same spot. The iframe will reload, which is undesired in this case.
Some clever use of shadowdom can be used to move an iframe around by changing which slot the iframe is inserted into. However, this is somewhat limited because it requires the part of the dom which the iframe is moving around in to be a shadowroot with slots set up for each spot where the iframe might go.
Reparenting <input> elements causes them to lose focus and selection. Focus and select some text in the following input element and then press the enter key - the event listener will reparent the element, showing how focus and selection are lost.
For input types which support the selection API, this can be fixed by manually saving and restoring selection. However, for input types which don't support selection, such as type=number, selection cannot be restored.
Reparenting elements currently undergoing a CSS transition causes the transition to restart. Click the below element to reparent it and see what happens to the CSS transition.
Using the new element.getAnimations() API, it is possible to get animation state before reparenting and restore it after reparenting.