in-element helper doesn't fire destroy hooks on children when destinationElement is removed from DOM

[apellerano-pw]

🐞 Describe the Bug

If there are elements nested inside an in-element helper, they get rendered to a remote element defined by destinationElement. If this remote element is removed from the DOM, the elements nested inside the in-element helper are destroyed. However, their destroy hooks are not triggered.

This can cause leakage and stale reference exceptions to occur, because modifier and component destroy hooks did not get a chance to do cleanup.

🔬 Minimal Reproduction

Glimdown reproduction

😕 Actual Behavior

• The destroy function for the modifier is not called.
• The destroy hook for the component is not called.

🤔 Expected Behavior

• The destroy function for the modifier is called.
• The destroy hook for the component is called.

🌍 Environment

• Ember: - I've reproduced this going back to Ember 3.28.12
• Ember-CLI: - 3.28.6
• Node.js/npm: - Node 18.20.0, npm 10.5.0
• OS: - macOS 14.5 Sonoma
• Browser: - Chrome 126.0.6478.127 (Official Build) (x86_64)

[apellerano-pw]

I've found a similar lifecycle issue for modifiers when conditionally rendered, and have repro steps in the issue reported to ember-modifier: ember-modifier/ember-modifier#613

Unsure if it's related, but wanted to call it out in case they are

[KoKuToru]

#in-element just attaches its children dom-elements to the target dom element.
inside embers component-tree nothing changes, the children of #in-element are still in the "original" place like defined in the hbs.
you can see this if you use the ember-inspector addon.

the moment #in-element gets destroyed it of course cleans up its children..

[apellerano-pw]

#in-element just attaches its children dom-elements to the target dom element. inside embers component-tree nothing changes, the children of #in-element are still in the "original" place like defined in the hbs. you can see this if you use the ember-inspector addon.

the moment #in-element gets destroyed it of course cleans up its children..

Regardless of what Ember's internal virtual DOM thinks, the actual DOM elements get removed when the destination element is removed from the DOM. This leads to crashes when referencing those elements.

Since the modifier API is specifically designed to give you references to DOM elements and not Ember's internal virtual DOM representations, it's easy to write these kinds of crashes when using Ember.

[kategengler]

I updated the Glimdown reproduction to use entirely Glimmer Components

The problem still exists.

The workaround for now is to duplicate the if around the {{#in-element}} or at least the contents. I'm actually surprised this works at all because I recall {{#in-element crashing if the destination did not exist in early days, but this may have just been from the polyfill.