Proper / common way to dynamically change / set component's parent.

[vatro]

We're already doing it e.g. here:

svelthree/src/utils/SvelthreeGLTF.ts

Line 102 in 754a5f1

context = root_component["$$"].context

svelthree/src/utils/SvelthreeGLTF.ts

Lines 107 to 111 in 754a5f1

	item.svelthree_comp = new Mesh({
	target: dom_target,
	props: { geometry: item.mesh.geometry, material: item.mesh.material, name: item.name },
	context
	})

by setting context to parent's context, but is this the proper / common way? Do Svelte people even do it / is it common? 🤔

I've stumbled over this, while asking myself, if / when does it make sense to recreate shadow_dom_el?
When would / does our_parent_shadow_dom_el change? see:

svelthree/src/components/Mesh.svelte

Lines 343 to 346 in 754a5f1

	$: if (mesh && create && !our_parent_shadow_dom_el) set_parent_shadow_dom_el()
	function set_parent_shadow_dom_el() {
	our_parent_shadow_dom_el = getContext("parent_shadow_dom_el") || scene_shadow_dom_el

would this make sense?:

$: if (our_parent_shadow_dom_el) {
  create_shadow_dom()
}

Currently it would make no sense, because our_parent_shadow_dom_el is not reactive, it's being set once after initialization via getContext("parent_shadow_dom_el") || scene_shadow_dom_el if our_parent_shadow_dom_el === undefined.

Changing object's parent / adding an object somewhere else / moving it should is a very common task in three.js applications, so it should also be possible with svelthree incl. accordingly updating the shadow DOM representation + good dx, see also: #103