Component Cleanup fails with dynamic generated child elements

Questions
1

Hey,

I am using Foundation6 to display modal-windows. The problem is that foundation6 is moving the content of the modal window into an additional div, which causes issues when ember is trying to cleanup the component.

My template looks like this:

<div>
   <ModalWindow id='XXXX' ...> Modal content </ModalWindow>
   Some more content
</div>

Where “ModalWindow” renders just a div with some foundation specific attributes and the content. However the resulting HTML in the browser after foundation did its magic looks like this:

<div>
    <div class="reveal-overlay">   // this is only inserted by foundation
        <div class="... ember-view">....</div> // do this is the actual ember component
    </div>
</div>

The issue is now when this modal is first rendered and then through some attribute changes not rendered anymore ember fails to clean up the DOM with the error message:

Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node
     clear: runtime.js: 286

While trying to remove the actual ember-component of the modal.

I haven’t found a way yet to get foundation to not generate that additional div, so may be there is a way to let ember clean it up instead?

ember: 3.20.2