From 42c17a8405073feeccd29373cb076d541c68d09b Mon Sep 17 00:00:00 2001
From: Vatroslav Vrbanic <v.vrbanic@cream.gmbh>
Date: Thu, 16 Jun 2022 17:36:36 +0200
Subject: [PATCH] Fix `shadow_dom_target` not ready in non-svelthree
 'container' components, close #72

This will add / append shadow DOM elements correctly, even for svelthree-components inside non-svelthree 'wrapper' components.
---
 src/components/AmbientLight.svelte       | 32 +++++---
 src/components/CubeCamera.svelte         | 32 +++++---
 src/components/DirectionalLight.svelte   | 32 +++++---
 src/components/Empty.svelte              | 32 +++++---
 src/components/HemisphereLight.svelte    | 32 +++++---
 src/components/LoadedGLTF.svelte         | 98 +++++++++++++++++-------
 src/components/Mesh.svelte               | 98 +++++++++++++++++-------
 src/components/OrthographicCamera.svelte | 32 +++++---
 src/components/PerspectiveCamera.svelte  | 32 +++++---
 src/components/PointLight.svelte         | 32 +++++---
 src/components/Points.svelte             | 98 +++++++++++++++++-------
 src/components/RectAreaLight.svelte      | 32 +++++---
 src/components/Scene.svelte              | 98 +++++++++++++++++-------
 src/components/SpotLight.svelte          | 32 +++++---
 14 files changed, 476 insertions(+), 236 deletions(-)

diff --git a/src/components/AmbientLight.svelte b/src/components/AmbientLight.svelte
index 2c2a301..fd8d98a 100644
--- a/src/components/AmbientLight.svelte
+++ b/src/components/AmbientLight.svelte
@@ -19,7 +19,7 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -193,26 +193,34 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && light && !shadow_dom_target) {
+	$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "AmbientLight"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > AmbientLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
diff --git a/src/components/CubeCamera.svelte b/src/components/CubeCamera.svelte
index 7239c82..990ea51 100644
--- a/src/components/CubeCamera.svelte
+++ b/src/components/CubeCamera.svelte
@@ -40,7 +40,7 @@ Renders a CubeMap for usage with **non-PBR** materials which have an `.envMap` p
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -415,26 +415,34 @@ Renders a CubeMap for usage with **non-PBR** materials which have an `.envMap` p
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && camera && !shadow_dom_target) {
+	$: if (shadow_root_el && camera && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "CubeCamera"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > CubeCamera > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
diff --git a/src/components/DirectionalLight.svelte b/src/components/DirectionalLight.svelte
index 8616a2f..ef8cfd6 100644
--- a/src/components/DirectionalLight.svelte
+++ b/src/components/DirectionalLight.svelte
@@ -33,7 +33,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -222,26 +222,34 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && light && !shadow_dom_target) {
+	$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "DirectionalLight"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > DirectionalLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
diff --git a/src/components/Empty.svelte b/src/components/Empty.svelte
index df22b61..ce29953 100644
--- a/src/components/Empty.svelte
+++ b/src/components/Empty.svelte
@@ -39,7 +39,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -221,15 +221,16 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	/** Specify the component / three.js object instance to act as an HTML `<a>` element. */
 	export let link: LinkProp = undefined
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && empty && !shadow_dom_target) {
+	$: if (shadow_root_el && empty && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			if (button) {
 				shadow_dom_target = document.createElement("button")
 
@@ -249,12 +250,19 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 			shadow_dom_target.dataset.kind = "Empty"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > Empty > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
diff --git a/src/components/HemisphereLight.svelte b/src/components/HemisphereLight.svelte
index db56fcb..4abf649 100644
--- a/src/components/HemisphereLight.svelte
+++ b/src/components/HemisphereLight.svelte
@@ -20,7 +20,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -195,26 +195,34 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && light && !shadow_dom_target) {
+	$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "HemisphereLight"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > HemisphereLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
diff --git a/src/components/LoadedGLTF.svelte b/src/components/LoadedGLTF.svelte
index 3bd0228..dbe55b7 100644
--- a/src/components/LoadedGLTF.svelte
+++ b/src/components/LoadedGLTF.svelte
@@ -260,15 +260,16 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	/** Specify the component / three.js object instance to act as an HTML `<a>` element. */
 	export let link: LinkProp = undefined
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && container && !shadow_dom_target) {
+	$: if (shadow_root_el && container && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			if (button) {
 				shadow_dom_target = document.createElement("button")
 
@@ -288,12 +289,19 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 			shadow_dom_target.dataset.kind = "LoadedGLTF"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > LoadedGLTF > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
@@ -532,7 +540,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	 */
 	export async function on(type: any, callback: any): Promise<void> {
 		if (interact) {
-			if (!interaction_comp) await tick()
+			if (!interaction_comp || !shadow_dom_target) await tick()
 
 			self.$on(type, callback)
 			interaction_comp.update_listeners = true
@@ -552,7 +560,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	 */
 	export async function onx(type: any, callback: any): Promise<void> {
 		if (interact) {
-			if (!interaction_comp) await tick()
+			if (!interaction_comp || !shadow_dom_target) await tick()
 
 			const cbacks = self.$$.callbacks[type]
 			if (callback) {
@@ -577,52 +585,84 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	export let modifiers: SvelthreeModifiersProp = undefined
 
 	export let on_click: SvelthreePointerEventHandler = undefined
-	$: if (on_click !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_click !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerup: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerup !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerup !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerdown: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerdown !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerdown !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerover: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerout: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerout !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerout !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointermove: SvelthreePointerEventHandler = undefined
-	$: if (on_pointermove !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointermove !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointermoveover: SvelthreePointerEventHandler = undefined
-	$: if (on_pointermoveover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointermoveover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keydown: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keydown !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keydown !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keypress: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keypress !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keypress !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keyup: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keyup !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keyup !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focus: SvelthreeFocusEventHandler = undefined
-	$: if (on_focus !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focus !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_blur: SvelthreeFocusEventHandler = undefined
-	$: if (on_blur !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_blur !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focusin: SvelthreeFocusEventHandler = undefined
-	$: if (on_focusin !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focusin !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focusout: SvelthreeFocusEventHandler = undefined
-	$: if (on_focusout !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focusout !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_wheel: SvelthreeWheelEventHandler = undefined // ->  TODO  implement
-	$: if (on_wheel !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_wheel !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_wheelover: SvelthreeWheelEventHandler = undefined // -> TODO  implement
-	$: if (on_wheelover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_wheelover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	/** Animation logic to be performed with the (three) object instance created by the component. */
 	export let animation: SvelthreeAnimationFunction = undefined
diff --git a/src/components/Mesh.svelte b/src/components/Mesh.svelte
index f8c7d0f..5ed8d5c 100644
--- a/src/components/Mesh.svelte
+++ b/src/components/Mesh.svelte
@@ -339,15 +339,16 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	/** Specify the component / three.js object instance to act as an HTML `<a>` element. */
 	export let link: LinkProp = undefined
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && mesh && !shadow_dom_target) {
+	$: if (shadow_root_el && mesh && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			if (button) {
 				shadow_dom_target = document.createElement("button")
 
@@ -367,12 +368,19 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 			shadow_dom_target.dataset.kind = "Mesh"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > Mesh > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
@@ -637,7 +645,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	 */
 	export async function on(type: any, callback: any): Promise<void> {
 		if (interact) {
-			if (!interaction_comp) await tick()
+			if (!interaction_comp || !shadow_dom_target) await tick()
 
 			self.$on(type, callback)
 			interaction_comp.update_listeners = true
@@ -657,7 +665,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	 */
 	export async function onx(type: any, callback: any): Promise<void> {
 		if (interact) {
-			if (!interaction_comp) await tick()
+			if (!interaction_comp || !shadow_dom_target) await tick()
 
 			const cbacks = self.$$.callbacks[type]
 			if (callback) {
@@ -682,52 +690,84 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	export let modifiers: SvelthreeModifiersProp = undefined
 
 	export let on_click: SvelthreePointerEventHandler = undefined
-	$: if (on_click !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_click !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerup: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerup !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerup !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerdown: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerdown !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerdown !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerover: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerout: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerout !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerout !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointermove: SvelthreePointerEventHandler = undefined
-	$: if (on_pointermove !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointermove !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointermoveover: SvelthreePointerEventHandler = undefined
-	$: if (on_pointermoveover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointermoveover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keydown: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keydown !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keydown !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keypress: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keypress !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keypress !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keyup: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keyup !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keyup !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focus: SvelthreeFocusEventHandler = undefined
-	$: if (on_focus !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focus !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_blur: SvelthreeFocusEventHandler = undefined
-	$: if (on_blur !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_blur !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focusin: SvelthreeFocusEventHandler = undefined
-	$: if (on_focusin !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focusin !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focusout: SvelthreeFocusEventHandler = undefined
-	$: if (on_focusout !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focusout !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_wheel: SvelthreeWheelEventHandler = undefined // ->  TODO  implement
-	$: if (on_wheel !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_wheel !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_wheelover: SvelthreeWheelEventHandler = undefined // -> TODO  implement
-	$: if (on_wheelover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_wheelover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	/** Animation logic to be performed with the (three) object instance created by the component. */
 	export let animation: SvelthreeAnimationFunction = undefined
diff --git a/src/components/OrthographicCamera.svelte b/src/components/OrthographicCamera.svelte
index e8cbc57..a164b91 100644
--- a/src/components/OrthographicCamera.svelte
+++ b/src/components/OrthographicCamera.svelte
@@ -42,7 +42,7 @@ If you use this approach you'll see a warning in the console if you define left,
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -309,26 +309,34 @@ If you use this approach you'll see a warning in the console if you define left,
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && camera && !shadow_dom_target) {
+	$: if (shadow_root_el && camera && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "OrthographicCamera"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > OrthographicCamera > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
diff --git a/src/components/PerspectiveCamera.svelte b/src/components/PerspectiveCamera.svelte
index 195aa78..68e7d6f 100644
--- a/src/components/PerspectiveCamera.svelte
+++ b/src/components/PerspectiveCamera.svelte
@@ -37,7 +37,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -261,26 +261,34 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && camera && !shadow_dom_target) {
+	$: if (shadow_root_el && camera && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "PerspectiveCamera"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > PerspectiveCamera > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
diff --git a/src/components/PointLight.svelte b/src/components/PointLight.svelte
index 7962b4d..6956ae1 100644
--- a/src/components/PointLight.svelte
+++ b/src/components/PointLight.svelte
@@ -37,7 +37,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -221,26 +221,34 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && light && !shadow_dom_target) {
+	$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "PointLight"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > PointLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
diff --git a/src/components/Points.svelte b/src/components/Points.svelte
index 407e5ed..bfac1de 100644
--- a/src/components/Points.svelte
+++ b/src/components/Points.svelte
@@ -349,15 +349,16 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	/** Specify the component / three.js object instance to act as an HTML `<a>` element. */
 	export let link: LinkProp = undefined
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && points && !shadow_dom_target) {
+	$: if (shadow_root_el && points && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			if (button) {
 				shadow_dom_target = document.createElement("button")
 
@@ -377,12 +378,19 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 			shadow_dom_target.dataset.kind = "Points"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > Points > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
@@ -647,7 +655,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	 */
 	export async function on(type: any, callback: any): Promise<void> {
 		if (interact) {
-			if (!interaction_comp) await tick()
+			if (!interaction_comp || !shadow_dom_target) await tick()
 
 			self.$on(type, callback)
 			interaction_comp.update_listeners = true
@@ -667,7 +675,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	 */
 	export async function onx(type: any, callback: any): Promise<void> {
 		if (interact) {
-			if (!interaction_comp) await tick()
+			if (!interaction_comp || !shadow_dom_target) await tick()
 
 			const cbacks = self.$$.callbacks[type]
 			if (callback) {
@@ -692,52 +700,84 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	export let modifiers: SvelthreeModifiersProp = undefined
 
 	export let on_click: SvelthreePointerEventHandler = undefined
-	$: if (on_click !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_click !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerup: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerup !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerup !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerdown: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerdown !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerdown !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerover: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerout: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerout !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerout !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointermove: SvelthreePointerEventHandler = undefined
-	$: if (on_pointermove !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointermove !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointermoveover: SvelthreePointerEventHandler = undefined
-	$: if (on_pointermoveover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointermoveover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keydown: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keydown !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keydown !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keypress: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keypress !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keypress !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keyup: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keyup !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keyup !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focus: SvelthreeFocusEventHandler = undefined
-	$: if (on_focus !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focus !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_blur: SvelthreeFocusEventHandler = undefined
-	$: if (on_blur !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_blur !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focusin: SvelthreeFocusEventHandler = undefined
-	$: if (on_focusin !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focusin !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focusout: SvelthreeFocusEventHandler = undefined
-	$: if (on_focusout !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focusout !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_wheel: SvelthreeWheelEventHandler = undefined // ->  TODO  implement
-	$: if (on_wheel !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_wheel !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_wheelover: SvelthreeWheelEventHandler = undefined // -> TODO  implement
-	$: if (on_wheelover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_wheelover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	/** Animation logic to be performed with the (three) object instance created by the component. */
 	export let animation: SvelthreeAnimationFunction = undefined
diff --git a/src/components/RectAreaLight.svelte b/src/components/RectAreaLight.svelte
index 8b5b79f..b8d3095 100644
--- a/src/components/RectAreaLight.svelte
+++ b/src/components/RectAreaLight.svelte
@@ -37,7 +37,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -224,26 +224,34 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && light && !shadow_dom_target) {
+	$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "RectAreaLight"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > RectAreaLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
diff --git a/src/components/Scene.svelte b/src/components/Scene.svelte
index 82f7b39..fe42f21 100644
--- a/src/components/Scene.svelte
+++ b/src/components/Scene.svelte
@@ -291,15 +291,16 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	/** Specify the component / three.js object instance to act as an HTML `<a>` element. */
 	export let link: LinkProp = undefined
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && scene && !shadow_dom_target) {
+	$: if (shadow_root_el && scene && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			if (button) {
 				shadow_dom_target = document.createElement("button")
 
@@ -319,12 +320,19 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 			shadow_dom_target.dataset.kind = "Scene"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > Scene > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 
@@ -682,7 +690,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	 */
 	export async function on(type: any, callback: any): Promise<void> {
 		if (interact) {
-			if (!interaction_comp) await tick()
+			if (!interaction_comp || !shadow_dom_target) await tick()
 
 			self.$on(type, callback)
 			interaction_comp.update_listeners = true
@@ -702,7 +710,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	 */
 	export async function onx(type: any, callback: any): Promise<void> {
 		if (interact) {
-			if (!interaction_comp) await tick()
+			if (!interaction_comp || !shadow_dom_target) await tick()
 
 			const cbacks = self.$$.callbacks[type]
 			if (callback) {
@@ -727,52 +735,84 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	export let modifiers: SvelthreeModifiersProp = undefined
 
 	export let on_click: SvelthreePointerEventHandler = undefined
-	$: if (on_click !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_click !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerup: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerup !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerup !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerdown: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerdown !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerdown !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerover: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointerout: SvelthreePointerEventHandler = undefined
-	$: if (on_pointerout !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointerout !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointermove: SvelthreePointerEventHandler = undefined
-	$: if (on_pointermove !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointermove !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_pointermoveover: SvelthreePointerEventHandler = undefined
-	$: if (on_pointermoveover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_pointermoveover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keydown: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keydown !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keydown !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keypress: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keypress !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keypress !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_keyup: SvelthreeKeyboardEventHandler = undefined
-	$: if (on_keyup !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_keyup !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focus: SvelthreeFocusEventHandler = undefined
-	$: if (on_focus !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focus !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_blur: SvelthreeFocusEventHandler = undefined
-	$: if (on_blur !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_blur !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focusin: SvelthreeFocusEventHandler = undefined
-	$: if (on_focusin !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focusin !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_focusout: SvelthreeFocusEventHandler = undefined
-	$: if (on_focusout !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_focusout !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_wheel: SvelthreeWheelEventHandler = undefined // ->  TODO  implement
-	$: if (on_wheel !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_wheel !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	export let on_wheelover: SvelthreeWheelEventHandler = undefined // -> TODO  implement
-	$: if (on_wheelover !== undefined && interaction_comp) interaction_comp.update_listeners = true
+	$: if (on_wheelover !== undefined && interaction_comp && shadow_dom_target) {
+		interaction_comp.update_listeners = true
+	}
 
 	/** Animation logic to be performed with the (three) object instance created by the component. */
 	export let animation: SvelthreeAnimationFunction = undefined
diff --git a/src/components/SpotLight.svelte b/src/components/SpotLight.svelte
index c40909d..fb356e3 100644
--- a/src/components/SpotLight.svelte
+++ b/src/components/SpotLight.svelte
@@ -32,7 +32,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -221,26 +221,34 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && light && !shadow_dom_target) {
+	$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "SpotLight"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > SpotLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}