renderComponent should automatically cleanup if the parentElement (the element passed to `into`) is removed from the DOM

[NullVoxPopuli]

🐞 Describe the Bug

Currently, it looks like we'd use this

• https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord/removedNodes

without this, users need to to manually call destroy (available on renderComponent's return value)

e.g.:

let { destroy } = renderComponent('...', { into: x });

// time passes

destroy();

vs

renderComponent('...', { into: x });

x.remove();

// component is destroyed for you (async)
// (desired, but not happening today)

This could also happen if you remove all of the children

x.innerHTML = '';

should trigger cleanup

[mtzamorim]

I'd like to work on this issue. I'm planning to start by adding coverage for removing the into element and clearing its children, while preserving the existing detached-element behavior. Would a MutationObserver-based approach be aligned with the intended implementation?

[NullVoxPopuli]

It is the only way, afaik