@sitecore-feaas/clientside 0.1.19 → 0.1.20

package/src/ui/FEAASContext.tsx

@@ -4,7 +4,7 @@ import { FEAASBase, OptionalExcept } from '../components/FEAASBase.js'
 export function FEAASContextProps(element: HTMLElement = this) {
   return {
     library: element?.getAttribute('library') as string,
-    src: element?.getAttribute('src') ?? '/assets/context.js',
+    src: element?.getAttribute('src') ?? '/context.js',
     frontend: element?.getAttribute('frontend') ?? 'https://components.sitecoreclud.io',
     backend: element?.getAttribute('backend') ?? 'https://components-api.sitecoreclud.io',
     cdn: element?.getAttribute('cdn') ?? 'https://feaascompontsapiprod.blob.core.windows.net',
@@ -36,23 +36,21 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     return this.shadowRoot || this.attachShadow({ mode: 'open' })
   }
 
-  reactRoot: HTMLDivElement
-  getReactRoot() {
-    if (!this.reactRoot) {
-      this.reactRoot = document.createElement('div')
-      this.getRoot().appendChild(this.reactRoot)
+  reactRootElement: HTMLDivElement
+  getReactRootElement() {
+    if (!this.reactRootElement) {
+      this.reactRootElement = document.createElement('div')
+      this.getRoot().appendChild(this.reactRootElement)
     }
-    return this.reactRoot
+    return this.reactRootElement
   }
 
   /** Pull in children FEAAS react elements into the shadow DOM so they receieve the styles */
-  nestedCallback(event: Event) {
-    super.nestedCallback(event)
-
-    const target = event.composedPath()[0] as FEAASBase
-    if (target.parentNode != this.getRoot()) {
-      this.getRoot().appendChild(target)
-    }
+  connectedCallback(): void {
+    Array.from(this.children).forEach((child) => {
+      this.getRoot().appendChild(child)
+    })
+    super.connectedCallback()
   }
 
   renderReact(
@@ -69,6 +67,7 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     }
     return (
       <AppContext
+        backend={this.props.backend}
         libraryId={this.props.library}
         container={this.getRoot()}
         getToken={this.props.getToken}