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

🐞 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