onMount/onCleanup not based on when component is added-to/removed-from DOM

[ZeikJT]

Describe the bug

If you store a component in a variable it runs onMount once the element is created, but not necessarily when it's mounted to the actual DOM. If this isn't fixable, might want to update the docs.

Similarly for onCleanup, once you're in this state the cleanup is based on the ancestors.

Your Example Website or App

https://playground.solidjs.com/anonymous/dbcc36b4-44e6-49ed-a7bf-50e376d71016

Steps to Reproduce the Bug or Issue

https://playground.solidjs.com/anonymous/dbcc36b4-44e6-49ed-a7bf-50e376d71016
https://playground.solidjs.com/anonymous/efd63022-a8c2-44fb-842f-51c474b4b959

Expected behavior

As a user, I'd expect onMount and onCleanup to run when the relevant component and elements are inserted into and removed from the DOM itself.

Registers a method that runs after initial rendering is done and the elements are mounted to the page.

https://docs.solidjs.com/reference/lifecycle/on-mount (emphasis mine)

Screenshots or Videos

No response

Platform

All of them I'd assume

Additional context

No response

[MateuszDev96]

From the way I understand how solid-js works, this onMount and onCleanup means more that the component has been plugged into a reactive core than into an actual document. I also find it confusing and ambiguous because, for example, web-components has a host element and a callbacks connectedCallback and disconnectedCallback and this actually says whether this component is mounted or not. In your case you are calling JSX at the level of the App function and as long as it is there then onCleanup will not execute for you.

This might interest you https://github.com/solidjs-community/solid-primitives/tree/main/packages/lifecycle#onelementconnect

[ryansolid]

Yeah this is by design and not something we can easily change. I will move it to docs.