diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 70d62c0dbf..8f5690c779 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1571,6 +1571,20 @@ exports[`Alpine.js > jsx > Javascript Test > componentWithContext 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"<div x-data=\\"componentWithContext()\\">
+  <div><span x-html=\\"foo.value\\"></span></div>
+
+  <div>other</div>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"componentWithContext\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > contentState 1`] = `
 "<div x-data=\\"renderContent()\\">setting context</div>
 <script>
@@ -4024,6 +4038,20 @@ exports[`Alpine.js > jsx > Typescript Test > componentWithContext 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"<div x-data=\\"componentWithContext()\\">
+  <div><span x-html=\\"foo.value\\"></span></div>
+
+  <div>other</div>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"componentWithContext\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > contentState 1`] = `
 "<div x-data=\\"renderContent()\\">setting context</div>
 <script>
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index 5db6ec8809..b96ffae7da 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -2614,6 +2614,44 @@ export class ComponentWithContextModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+@Component({
+  selector: \\"component-with-context, ComponentWithContext\\",
+  template: \`
+    <ng-container>
+      <ng-container>{{foo.value}}</ng-container>
+
+      <div>other</div>
+    </ng-container>
+  \`,
+})
+export class ComponentWithContext {
+  @Input() content: ComponentWithContextProps[\\"content\\"];
+
+  constructor(public foo: Context1) {}
+}
+
+@NgModule({
+  declarations: [ComponentWithContext],
+  imports: [CommonModule],
+  exports: [ComponentWithContext],
+})
+export class ComponentWithContextModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > contentState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6904,6 +6942,44 @@ export class ComponentWithContextModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+@Component({
+  selector: \\"component-with-context, ComponentWithContext\\",
+  template: \`
+    <ng-container>
+      <ng-container>{{foo.value}}</ng-container>
+
+      <div>other</div>
+    </ng-container>
+  \`,
+})
+export class ComponentWithContext {
+  @Input() content: ComponentWithContextProps[\\"content\\"];
+
+  constructor(public foo: Context1) {}
+}
+
+@NgModule({
+  declarations: [ComponentWithContext],
+  imports: [CommonModule],
+  exports: [ComponentWithContext],
+})
+export class ComponentWithContextModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > contentState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index d698628602..0e972b516d 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -2662,6 +2662,45 @@ export class ComponentWithContextModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+@Component({
+  selector: \\"component-with-context, ComponentWithContext\\",
+  template: \`
+    <ng-container>
+      <ng-container>{{foo.value}}</ng-container>
+
+      <div>other</div>
+    </ng-container>
+  \`,
+})
+export class ComponentWithContext {
+  @Input() content: ComponentWithContextProps[\\"content\\"];
+
+  constructor(public foo: Context1) {}
+}
+
+@NgModule({
+  declarations: [ComponentWithContext],
+  imports: [CommonModule],
+  exports: [ComponentWithContext],
+  bootstrap: [SomeOtherComponent],
+})
+export class ComponentWithContextModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > contentState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7041,6 +7080,45 @@ export class ComponentWithContextModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+@Component({
+  selector: \\"component-with-context, ComponentWithContext\\",
+  template: \`
+    <ng-container>
+      <ng-container>{{foo.value}}</ng-container>
+
+      <div>other</div>
+    </ng-container>
+  \`,
+})
+export class ComponentWithContext {
+  @Input() content: ComponentWithContextProps[\\"content\\"];
+
+  constructor(public foo: Context1) {}
+}
+
+@NgModule({
+  declarations: [ComponentWithContext],
+  imports: [CommonModule],
+  exports: [ComponentWithContext],
+  bootstrap: [SomeOtherComponent],
+})
+export class ComponentWithContextModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > contentState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index ffdf717258..8cba44386e 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -5372,6 +5372,85 @@ export class ComponentWithContextModule {}
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+@Component({
+  selector: \\"component-with-context, ComponentWithContext\\",
+  template: \`
+    <ng-container>
+      <ng-container>{{foo.value}}</ng-container>
+
+      <div>other</div>
+    </ng-container>
+  \`,
+})
+export class ComponentWithContext {
+  @Input() content: ComponentWithContextProps[\\"content\\"];
+
+  constructor(public foo: Context1) {}
+}
+
+@NgModule({
+  declarations: [ComponentWithContext],
+  imports: [CommonModule],
+  exports: [ComponentWithContext],
+})
+export class ComponentWithContextModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > componentWithContextMultiRoot 2`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+@Component({
+  selector: \\"component-with-context, ComponentWithContext\\",
+  template: \`
+    <ng-container>
+      <ng-container>{{foo.value}}</ng-container>
+
+      <div>other</div>
+    </ng-container>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class ComponentWithContext {
+  @Input() content: ComponentWithContextProps[\\"content\\"];
+
+  constructor(public foo: Context1) {}
+}
+
+@NgModule({
+  declarations: [ComponentWithContext],
+  imports: [CommonModule],
+  exports: [ComponentWithContext],
+})
+export class ComponentWithContextModule {}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > contentState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -14209,6 +14288,85 @@ export class ComponentWithContextModule {}
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+@Component({
+  selector: \\"component-with-context, ComponentWithContext\\",
+  template: \`
+    <ng-container>
+      <ng-container>{{foo.value}}</ng-container>
+
+      <div>other</div>
+    </ng-container>
+  \`,
+})
+export class ComponentWithContext {
+  @Input() content: ComponentWithContextProps[\\"content\\"];
+
+  constructor(public foo: Context1) {}
+}
+
+@NgModule({
+  declarations: [ComponentWithContext],
+  imports: [CommonModule],
+  exports: [ComponentWithContext],
+})
+export class ComponentWithContextModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > componentWithContextMultiRoot 2`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+@Component({
+  selector: \\"component-with-context, ComponentWithContext\\",
+  template: \`
+    <ng-container>
+      <ng-container>{{foo.value}}</ng-container>
+
+      <div>other</div>
+    </ng-container>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class ComponentWithContext {
+  @Input() content: ComponentWithContextProps[\\"content\\"];
+
+  constructor(public foo: Context1) {}
+}
+
+@NgModule({
+  declarations: [ComponentWithContext],
+  imports: [CommonModule],
+  exports: [ComponentWithContext],
+})
+export class ComponentWithContextModule {}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > contentState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index adb33e6c5e..e45864e7da 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -3573,6 +3573,63 @@ exports[`Html > jsx > Javascript Test > componentWithContext 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"<template data-el=\\"div-1\\"><!-- foo.value --></template>
+
+<div>other</div>
+
+<script>
+  (() => {
+    const state = {};
+    let props = {};
+    let context = null;
+    let nodesToDestroy = [];
+    let pendingUpdate = false;
+
+    function destroyAnyNodes() {
+      // destroy current view template refs before rendering again
+      nodesToDestroy.forEach((el) => el.remove());
+      nodesToDestroy = [];
+    }
+
+    // Function to update data bindings and loops
+    // call update() when you mutate state and need the updates to reflect
+    // in the dom
+    function update() {
+      if (pendingUpdate === true) {
+        return;
+      }
+      pendingUpdate = true;
+
+      document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => {
+        renderTextNode(el, foo.value);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+
+    // Helper text DOM nodes
+    function renderTextNode(el, text) {
+      const textNode = document.createTextNode(text);
+      if (el?.scope) {
+        textNode.scope = el.scope;
+      }
+      if (el?.context) {
+        child.context = el.context;
+      }
+      el.after(textNode);
+      nodesToDestroy.push(el.nextSibling);
+    }
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > contentState 1`] = `
 "<div>setting context</div>
 "
@@ -9206,6 +9263,63 @@ exports[`Html > jsx > Typescript Test > componentWithContext 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"<template data-el=\\"div-1\\"><!-- foo.value --></template>
+
+<div>other</div>
+
+<script>
+  (() => {
+    const state = {};
+    let props = {};
+    let context = null;
+    let nodesToDestroy = [];
+    let pendingUpdate = false;
+
+    function destroyAnyNodes() {
+      // destroy current view template refs before rendering again
+      nodesToDestroy.forEach((el) => el.remove());
+      nodesToDestroy = [];
+    }
+
+    // Function to update data bindings and loops
+    // call update() when you mutate state and need the updates to reflect
+    // in the dom
+    function update() {
+      if (pendingUpdate === true) {
+        return;
+      }
+      pendingUpdate = true;
+
+      document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => {
+        renderTextNode(el, foo.value);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+
+    // Helper text DOM nodes
+    function renderTextNode(el, text) {
+      const textNode = document.createTextNode(text);
+      if (el?.scope) {
+        textNode.scope = el.scope;
+      }
+      if (el?.context) {
+        child.context = el.context;
+      }
+      el.after(textNode);
+      nodesToDestroy.push(el.nextSibling);
+    }
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > contentState 1`] = `
 "<div>setting context</div>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 7ef964aef1..e253d0ea8c 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -529,6 +529,15 @@ exports[`Liquid > jsx > Javascript Test > componentWithContext 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"<div>
+  <div>{{foo.value}}</div>
+
+  <div>other</div>
+</div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > contentState 1`] = `
 "<div>setting context</div>
 "
@@ -1341,6 +1350,15 @@ exports[`Liquid > jsx > Typescript Test > componentWithContext 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"<div>
+  <div>{{foo.value}}</div>
+
+  <div>other</div>
+</div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > contentState 1`] = `
 "<div>setting context</div>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index 1cd573b73d..dee0b3cd36 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -2541,6 +2541,40 @@ export default class ComponentWithContext extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+@customElement(\\"component-with-context\\")
+export default class ComponentWithContext extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() content: any;
+
+  render() {
+    return html\`
+        
+        <my-fragment>
+        <my-fragment>\${foo.value}</my-fragment>
+
+        <div>other</div>
+      </my-fragment>
+
+      \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > contentState 1`] = `
 "import \\"@dummy/context.js\\";
 
@@ -6712,6 +6746,40 @@ export default class ComponentWithContext extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+@customElement(\\"component-with-context\\")
+export default class ComponentWithContext extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() content: any;
+
+  render() {
+    return html\`
+        
+        <my-fragment>
+        <my-fragment>\${foo.value}</my-fragment>
+
+        <div>other</div>
+      </my-fragment>
+
+      \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > contentState 1`] = `
 "import \\"@dummy/context.js\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 8852f5e76b..450e49c601 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1490,6 +1490,17 @@ class {}
 \${foo.value}"
 `;
 
+exports[`Marko > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+class {}
+
+\${foo.value}
+
+<div>other</div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > contentState 1`] = `
 "import BuilderContext from \\"@dummy/context.marko\\";
 
@@ -3669,6 +3680,17 @@ class {}
 \${foo.value}"
 `;
 
+exports[`Marko > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+class {}
+
+\${foo.value}
+
+<div>other</div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > contentState 1`] = `
 "import BuilderContext from \\"@dummy/context.marko\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index ae5763419b..b4ee750e18 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -7374,6 +7374,166 @@ exports[`Parse JSX > componentWithContext 1`] = `
 }
 `;
 
+exports[`Parse JSX > componentWithContextMultiRoot 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "
+      ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "_text": {
+                  "code": "foo.value",
+                },
+              },
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {},
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "Fragment",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "
+      ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {},
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {
+                "_text": "other",
+              },
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "
+    ",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "Fragment",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {
+      "foo": {
+        "name": "Context1",
+        "path": "@dummy/1:default",
+      },
+    },
+    "set": {
+      "@dummy/1:default": {
+        "name": "Context1",
+        "value": {
+          "content": {
+            "code": "content() {
+  return props.content;
+}",
+            "type": "method",
+          },
+          "foo": {
+            "code": "'bar'",
+            "type": "property",
+          },
+        },
+      },
+      "@dummy/2:default": {
+        "name": "Context2",
+        "value": {
+          "bar": {
+            "code": "'baz'",
+            "type": "property",
+          },
+        },
+      },
+    },
+  },
+  "exports": {},
+  "hooks": {},
+  "imports": [
+    {
+      "imports": {
+        "Context1": "default",
+      },
+      "path": "@dummy/1",
+    },
+    {
+      "imports": {
+        "Context2": "default",
+      },
+      "path": "@dummy/2",
+    },
+  ],
+  "inputs": [],
+  "meta": {},
+  "name": "ComponentWithContext",
+  "propsTypeRef": "ComponentWithContextProps",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+  "types": [
+    "export interface ComponentWithContextProps {
+  content: string
+}",
+  ],
+}
+`;
+
 exports[`Parse JSX > contentState 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 9b09d5cac5..d5ecdaf091 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1739,6 +1739,43 @@ export default function ComponentWithContext(props) {
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useContext } from \\"preact/hooks\\";
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+  const foo = useContext(Context1);
+
+  return (
+    <Context2.Provider
+      value={{
+        bar: \\"baz\\",
+      }}
+    >
+      <Context1.Provider
+        value={{
+          foo: \\"bar\\",
+
+          content() {
+            return props.content;
+          },
+        }}
+      >
+        <Fragment>
+          {foo.value}
+
+          <div>other</div>
+        </Fragment>
+      </Context1.Provider>
+    </Context2.Provider>
+  );
+}
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > contentState 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -4834,6 +4871,48 @@ export default function ComponentWithContext(props: ComponentWithContextProps) {
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useContext } from \\"preact/hooks\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props: ComponentWithContextProps) {
+  const foo = useContext(Context1);
+
+  return (
+    <Context2.Provider
+      value={{
+        bar: \\"baz\\",
+      }}
+    >
+      <Context1.Provider
+        value={{
+          foo: \\"bar\\",
+
+          content() {
+            return props.content;
+          },
+        }}
+      >
+        <Fragment>
+          {foo.value}
+
+          <div>other</div>
+        </Fragment>
+      </Context1.Provider>
+    </Context2.Provider>
+  );
+}
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > contentState 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 1b3b07a44a..55e58e1a34 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -1658,6 +1658,45 @@ export default function ComponentWithContext(props) {
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import * as React from \\"react\\";
+import { View, StyleSheet, Image, Text } from \\"react-native\\";
+import { useContext } from \\"react\\";
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+  const foo = useContext(Context1);
+
+  return (
+    <Context2.Provider
+      value={{
+        bar: \\"baz\\",
+      }}
+    >
+      <Context1.Provider
+        value={{
+          foo: \\"bar\\",
+
+          content() {
+            return props.content;
+          },
+        }}
+      >
+        <>
+          <Text>{foo.value}</Text>
+
+          <View>
+            <Text>other</Text>
+          </View>
+        </>
+      </Context1.Provider>
+    </Context2.Provider>
+  );
+}
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > contentState 1`] = `
 "import * as React from \\"react\\";
 import { View, StyleSheet, Image, Text } from \\"react-native\\";
@@ -4668,6 +4707,50 @@ export default function ComponentWithContext(props: ComponentWithContextProps) {
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import * as React from \\"react\\";
+import { View, StyleSheet, Image, Text } from \\"react-native\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props: ComponentWithContextProps) {
+  const foo = useContext(Context1);
+
+  return (
+    <Context2.Provider
+      value={{
+        bar: \\"baz\\",
+      }}
+    >
+      <Context1.Provider
+        value={{
+          foo: \\"bar\\",
+
+          content() {
+            return props.content;
+          },
+        }}
+      >
+        <>
+          <Text>{foo.value}</Text>
+
+          <View>
+            <Text>other</Text>
+          </View>
+        </>
+      </Context1.Provider>
+    </Context2.Provider>
+  );
+}
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > contentState 1`] = `
 "import * as React from \\"react\\";
 import { View, StyleSheet, Image, Text } from \\"react-native\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 2431cd7985..9289f13680 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -1693,6 +1693,42 @@ export default function ComponentWithContext(props) {
 "
 `;
 
+exports[`React > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+  const foo = useContext(Context1);
+
+  return (
+    <Context2.Provider
+      value={{
+        bar: \\"baz\\",
+      }}
+    >
+      <Context1.Provider
+        value={{
+          foo: \\"bar\\",
+
+          content() {
+            return props.content;
+          },
+        }}
+      >
+        <>
+          {foo.value}
+
+          <div>other</div>
+        </>
+      </Context1.Provider>
+    </Context2.Provider>
+  );
+}
+"
+`;
+
 exports[`React > jsx > Javascript Test > contentState 1`] = `
 "import * as React from \\"react\\";
 import { useContext } from \\"react\\";
@@ -4703,6 +4739,47 @@ export default function ComponentWithContext(props: ComponentWithContextProps) {
 "
 `;
 
+exports[`React > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props: ComponentWithContextProps) {
+  const foo = useContext(Context1);
+
+  return (
+    <Context2.Provider
+      value={{
+        bar: \\"baz\\",
+      }}
+    >
+      <Context1.Provider
+        value={{
+          foo: \\"bar\\",
+
+          content() {
+            return props.content;
+          },
+        }}
+      >
+        <>
+          {foo.value}
+
+          <div>other</div>
+        </>
+      </Context1.Provider>
+    </Context2.Provider>
+  );
+}
+"
+`;
+
 exports[`React > jsx > Typescript Test > contentState 1`] = `
 "import * as React from \\"react\\";
 import { useContext } from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 7b9c3f4dc9..cdfcf62178 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -1547,6 +1547,36 @@ export default function ComponentWithContext(props) {
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import * as React from \\"react\\";
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const foo = _context[\\"Context1\\"];
+
+  _context.Context1 = {
+    foo: \\"bar\\",
+    content() {
+      return props.content;
+    },
+  };
+
+  _context.Context2 = { bar: \\"baz\\" };
+
+  return (
+    <>
+      {foo.value}
+
+      <div>other</div>
+    </>
+  );
+}
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > contentState 1`] = `
 "import * as React from \\"react\\";
 import BuilderContext from \\"@dummy/context.lite\\";
@@ -4398,6 +4428,41 @@ export default function ComponentWithContext(props: ComponentWithContextProps) {
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import * as React from \\"react\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props: ComponentWithContextProps) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const foo = _context[\\"Context1\\"];
+
+  _context.Context1 = {
+    foo: \\"bar\\",
+    content() {
+      return props.content;
+    },
+  };
+
+  _context.Context2 = { bar: \\"baz\\" };
+
+  return (
+    <>
+      {foo.value}
+
+      <div>other</div>
+    </>
+  );
+}
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > contentState 1`] = `
 "import * as React from \\"react\\";
 import BuilderContext from \\"@dummy/context.lite\\";
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index f822df563c..cd27cf2e74 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -3692,6 +3692,84 @@ export default ComponentWithContext;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import { useContext } from \\"solid-js\\";
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props) {
+  const foo = useContext(Context1);
+
+  return (
+    <Context2.Provider
+      value={{
+        bar: \\"baz\\",
+      }}
+    >
+      <Context1.Provider
+        value={{
+          foo: \\"bar\\",
+
+          content() {
+            return props.content;
+          },
+        }}
+      >
+        <>
+          <>{foo.value}</>
+          <div>other</div>
+        </>
+      </Context1.Provider>
+    </Context2.Provider>
+  );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > componentWithContextMultiRoot 2`] = `
+"import { useContext } from \\"solid-js\\";
+
+import { css } from \\"solid-styled-components\\";
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props) {
+  const foo = useContext(Context1);
+
+  return (
+    <>
+      <Context2.Provider
+        value={{
+          bar: \\"baz\\",
+        }}
+      >
+        <Context1.Provider
+          value={{
+            foo: \\"bar\\",
+
+            content() {
+              return props.content;
+            },
+          }}
+        >
+          <>
+            <>{foo.value}</>
+            <div>other</div>
+          </>
+        </Context1.Provider>
+      </Context2.Provider>
+    </>
+  );
+}
+
+export default ComponentWithContext;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > contentState 1`] = `
 "import BuilderContext from \\"@dummy/context.jsx\\";
 
@@ -10036,6 +10114,91 @@ export default ComponentWithContext;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import { useContext } from \\"solid-js\\";
+
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+  const foo = useContext(Context1);
+
+  return (
+    <Context2.Provider
+      value={{
+        bar: \\"baz\\",
+      }}
+    >
+      <Context1.Provider
+        value={{
+          foo: \\"bar\\",
+
+          content() {
+            return props.content;
+          },
+        }}
+      >
+        <>
+          <>{foo.value}</>
+          <div>other</div>
+        </>
+      </Context1.Provider>
+    </Context2.Provider>
+  );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > componentWithContextMultiRoot 2`] = `
+"import { useContext } from \\"solid-js\\";
+
+import { css } from \\"solid-styled-components\\";
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+  const foo = useContext(Context1);
+
+  return (
+    <>
+      <Context2.Provider
+        value={{
+          bar: \\"baz\\",
+        }}
+      >
+        <Context1.Provider
+          value={{
+            foo: \\"bar\\",
+
+            content() {
+              return props.content;
+            },
+          }}
+        >
+          <>
+            <>{foo.value}</>
+            <div>other</div>
+          </>
+        </Context1.Provider>
+      </Context2.Provider>
+    </>
+  );
+}
+
+export default ComponentWithContext;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > contentState 1`] = `
 "import BuilderContext from \\"@dummy/context.jsx\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 515882107e..f32e77ee3c 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -1958,6 +1958,31 @@ export default class ComponentWithContext {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"component-with-context\\",
+})
+export default class ComponentWithContext {
+  @Prop() content: any;
+
+  render() {
+    return (
+      <Fragment>
+        <Fragment>{foo.value}</Fragment>
+
+        <div>other</div>
+      </Fragment>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > contentState 1`] = `
 "import BuilderContext from \\"@dummy/context.lite\\";
 
@@ -4751,6 +4776,31 @@ export default class ComponentWithContext {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"component-with-context\\",
+})
+export default class ComponentWithContext {
+  @Prop() content: any;
+
+  render() {
+    return (
+      <Fragment>
+        <Fragment>{foo.value}</Fragment>
+
+        <div>other</div>
+      </Fragment>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > contentState 1`] = `
 "import BuilderContext from \\"@dummy/context.lite\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 50bc6bbec5..fdf5fd9012 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1471,6 +1471,33 @@ exports[`Svelte > jsx > Javascript Test > componentWithContext 1`] = `
 {foo.value}"
 `;
 
+exports[`Svelte > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"<script>
+  import { getContext, setContext } from \\"svelte\\";
+
+  import Context1 from \\"@dummy/1\\";
+  import Context2 from \\"@dummy/2\\";
+
+  export let content;
+
+  let foo = getContext(Context1.key);
+  setContext(Context1.key, {
+    foo: \\"bar\\",
+
+    content() {
+      return content;
+    },
+  });
+  setContext(Context2.key, {
+    bar: \\"baz\\",
+  });
+</script>
+
+{foo.value}
+
+<div>other</div>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > contentState 1`] = `
 "<script>
   import { setContext } from \\"svelte\\";
@@ -4081,6 +4108,39 @@ exports[`Svelte > jsx > Typescript Test > componentWithContext 1`] = `
 {foo.value}"
 `;
 
+exports[`Svelte > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"<script context=\\"module\\" lang=\\"ts\\">
+  export interface ComponentWithContextProps {
+    content: string;
+  }
+</script>
+
+<script lang=\\"ts\\">
+  import { getContext, setContext } from \\"svelte\\";
+
+  import Context1 from \\"@dummy/1\\";
+  import Context2 from \\"@dummy/2\\";
+
+  export let content: ComponentWithContextProps[\\"content\\"];
+
+  let foo = getContext(Context1.key);
+  setContext(Context1.key, {
+    foo: \\"bar\\",
+
+    content() {
+      return content;
+    },
+  });
+  setContext(Context2.key, {
+    bar: \\"baz\\",
+  });
+</script>
+
+{foo.value}
+
+<div>other</div>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > contentState 1`] = `
 "<script lang=\\"ts\\">
   import { setContext } from \\"svelte\\";
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index cffebebaff..e4d5f00d6b 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -11,9 +11,7 @@ exports[`Vue > jsx > Javascript Test > AdvancedRef 1`] = `
         @blur=\\"onBlur()\\"
         @input=\\"name = $event.target.value\\"
       />
-
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-
       <select name=\\"cars\\" id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
@@ -299,9 +297,7 @@ exports[`Vue > jsx > Javascript Test > BasicRef 1`] = `
         @blur=\\"onBlur()\\"
         @input=\\"name = $event.target.value\\"
       />
-
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-
       <select name=\\"cars\\" id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
@@ -1758,6 +1754,32 @@ provide(Context2.key, { bar: \\"baz\\" });
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"<template>
+  {{ foo.value }}
+  <div>other</div>
+</template>
+
+<script setup>
+import { inject, provide } from \\"vue\\";
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+const props = defineProps([\\"content\\"]);
+
+const foo = inject(Context1.key);
+
+provide(Context1.key, {
+  foo: \\"bar\\",
+  content() {
+    return props.content;
+  },
+});
+provide(Context2.key, { bar: \\"baz\\" });
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > contentState 1`] = `
 "<template>
   <div>setting context</div>
@@ -2713,9 +2735,7 @@ exports[`Vue > jsx > Typescript Test > AdvancedRef 1`] = `
         @blur=\\"onBlur()\\"
         @input=\\"name = $event.target.value\\"
       />
-
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-
       <select name=\\"cars\\" id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
@@ -3016,9 +3036,7 @@ exports[`Vue > jsx > Typescript Test > BasicRef 1`] = `
         @blur=\\"onBlur()\\"
         @input=\\"name = $event.target.value\\"
       />
-
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-
       <select name=\\"cars\\" id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
@@ -4643,6 +4661,35 @@ provide(Context2.key, { bar: \\"baz\\" });
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"<template>
+  {{ foo.value }}
+  <div>other</div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { inject, provide } from \\"vue\\";
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+const props = defineProps<ComponentWithContextProps>();
+
+const foo = inject(Context1.key);
+
+provide(Context1.key, {
+  foo: \\"bar\\",
+  content() {
+    return props.content;
+  },
+});
+provide(Context2.key, { bar: \\"baz\\" });
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > contentState 1`] = `
 "<template>
   <div>setting context</div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 856949fa6b..dfac124417 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -11,9 +11,7 @@ exports[`Vue > jsx > Javascript Test > AdvancedRef 1`] = `
         @blur=\\"onBlur()\\"
         @input=\\"name = $event.target.value\\"
       />
-
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-
       <select name=\\"cars\\" id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
@@ -366,9 +364,7 @@ exports[`Vue > jsx > Javascript Test > BasicRef 1`] = `
         @blur=\\"onBlur()\\"
         @input=\\"name = $event.target.value\\"
       />
-
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-
       <select name=\\"cars\\" id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
@@ -1971,7 +1967,40 @@ export default {
 </style>"
 `;
 
-exports[`Vue > jsx > Javascript Test > componentWithContext 1`] = `"Vue 2 template should have a single root element"`;
+exports[`Vue > jsx > Javascript Test > componentWithContext 1`] = `
+"<template>
+  {{ foo.value }}
+</template>
+
+<script>
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default {
+  name: \\"component-with-context\\",
+
+  props: [\\"content\\"],
+
+  provide() {
+    const _this = this;
+    return {
+      [Context1.key]: {
+        foo: \\"bar\\",
+        content() {
+          return _this.content;
+        },
+      },
+      [Context2.key]: { bar: \\"baz\\" },
+    };
+  },
+  inject: {
+    foo: Context1.key,
+  },
+};
+</script>"
+`;
+
+exports[`Vue > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `"Vue 2 template should have a single root element"`;
 
 exports[`Vue > jsx > Javascript Test > contentState 1`] = `
 "<template>
@@ -3105,9 +3134,7 @@ exports[`Vue > jsx > Typescript Test > AdvancedRef 1`] = `
         @blur=\\"onBlur()\\"
         @input=\\"name = $event.target.value\\"
       />
-
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-
       <select name=\\"cars\\" id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
@@ -3478,9 +3505,7 @@ exports[`Vue > jsx > Typescript Test > BasicRef 1`] = `
         @blur=\\"onBlur()\\"
         @input=\\"name = $event.target.value\\"
       />
-
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-
       <select name=\\"cars\\" id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
@@ -5317,7 +5342,44 @@ export default {
 </style>"
 `;
 
-exports[`Vue > jsx > Typescript Test > componentWithContext 1`] = `"Vue 2 template should have a single root element"`;
+exports[`Vue > jsx > Typescript Test > componentWithContext 1`] = `
+"<template>
+  {{ foo.value }}
+</template>
+
+<script lang=\\"ts\\">
+export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default {
+  name: \\"component-with-context\\",
+
+  props: [\\"content\\"],
+
+  provide() {
+    const _this = this;
+    return {
+      [Context1.key]: {
+        foo: \\"bar\\",
+        content() {
+          return _this.content;
+        },
+      },
+      [Context2.key]: { bar: \\"baz\\" },
+    };
+  },
+  inject: {
+    foo: Context1.key,
+  },
+};
+</script>"
+`;
+
+exports[`Vue > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `"Vue 2 template should have a single root element"`;
 
 exports[`Vue > jsx > Typescript Test > contentState 1`] = `
 "<template>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 8e914d1b22..08fea820c8 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -7916,6 +7916,141 @@ customElements.define(\\"component-with-context\\", ComponentWithContext);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+/**
+ * Usage:
+ *
+ *  <component-with-context></component-with-context>
+ *
+ */
+class ComponentWithContext extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [\\"content\\"];
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this.foo = this.getContext(this._root, Context1);
+
+    this.getAttributeNames().forEach((attr) => {
+      const jsVar = attr.replace(/-/g, \\"\\");
+      const regexp = new RegExp(jsVar, \\"i\\");
+      this.componentProps.forEach((prop) => {
+        if (regexp.test(prop)) {
+          const attrValue = this.getAttribute(attr);
+          if (this.props[prop] !== attrValue) {
+            this.props[prop] = attrValue;
+          }
+        }
+      });
+    });
+
+    this._root.innerHTML = \`
+      <template data-el=\\"div-component-with-context-1\\"><!-- foo.value --></template>
+      
+      <div>other</div>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {
+    this._root
+      .querySelectorAll(\\"[data-el='div-component-with-context-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.foo.value);
+      });
+  }
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+
+  // get Context Helper
+  getContext(el, token) {
+    do {
+      let value;
+      if (el?.context?.get) {
+        value = el.context.get(token);
+      } else if (el?.context?.[token]) {
+        value = el.context[token];
+      }
+      if (value !== undefined) {
+        return value;
+      }
+    } while ((el = el.parentNode));
+  }
+}
+
+customElements.define(\\"component-with-context\\", ComponentWithContext);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > contentState 1`] = `
 "import BuilderContext from \\"@dummy/context.lite\\";
 
@@ -20233,6 +20368,141 @@ customElements.define(\\"component-with-context\\", ComponentWithContext);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"export interface ComponentWithContextProps {
+  content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+/**
+ * Usage:
+ *
+ *  <component-with-context></component-with-context>
+ *
+ */
+class ComponentWithContext extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [\\"content\\"];
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this.foo = this.getContext(this._root, Context1);
+
+    this.getAttributeNames().forEach((attr) => {
+      const jsVar = attr.replace(/-/g, \\"\\");
+      const regexp = new RegExp(jsVar, \\"i\\");
+      this.componentProps.forEach((prop) => {
+        if (regexp.test(prop)) {
+          const attrValue = this.getAttribute(attr);
+          if (this.props[prop] !== attrValue) {
+            this.props[prop] = attrValue;
+          }
+        }
+      });
+    });
+
+    this._root.innerHTML = \`
+      <template data-el=\\"div-component-with-context-1\\"><!-- foo.value --></template>
+      
+      <div>other</div>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {
+    this._root
+      .querySelectorAll(\\"[data-el='div-component-with-context-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.foo.value);
+      });
+  }
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+
+  // get Context Helper
+  getContext(el, token) {
+    do {
+      let value;
+      if (el?.context?.get) {
+        value = el.context.get(token);
+      } else if (el?.context?.[token]) {
+        value = el.context[token];
+      }
+      if (value !== undefined) {
+        return value;
+      }
+    } while ((el = el.parentNode));
+  }
+}
+
+customElements.define(\\"component-with-context\\", ComponentWithContext);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > contentState 1`] = `
 "import BuilderContext from \\"@dummy/context.lite\\";
 
diff --git a/packages/core/src/__tests__/data/context/component-with-context-multi-root.raw.tsx b/packages/core/src/__tests__/data/context/component-with-context-multi-root.raw.tsx
new file mode 100644
index 0000000000..865cad7792
--- /dev/null
+++ b/packages/core/src/__tests__/data/context/component-with-context-multi-root.raw.tsx
@@ -0,0 +1,21 @@
+import Context1 from '@dummy/1';
+import Context2 from '@dummy/2';
+import { useContext, setContext } from '@builder.io/mitosis';
+
+export default function ComponentWithContext(props: { content: string }) {
+  const foo = useContext(Context1);
+
+  setContext(Context1, {
+    foo: 'bar',
+    content() {
+      return props.content;
+    },
+  });
+
+  return (
+    <Context2.Provider value={{ bar: 'baz' }}>
+      <>{foo.value}</>
+      <div>other</div>
+    </Context2.Provider>
+  );
+}
diff --git a/packages/core/src/__tests__/shared.ts b/packages/core/src/__tests__/shared.ts
index 8e5f7cfd9e..5a8d20b13f 100644
--- a/packages/core/src/__tests__/shared.ts
+++ b/packages/core/src/__tests__/shared.ts
@@ -15,6 +15,9 @@ const basicOutputsMeta = getRawFile('./data/basic-outputs-meta.raw.tsx');
 const basicOutputs = getRawFile('./data/basic-outputs.raw.tsx');
 const subComponent = getRawFile('./data/sub-component.raw.tsx');
 const componentWithContext = getRawFile('./data/context/component-with-context.raw.tsx');
+const componentWithContextMultiRoot = getRawFile(
+  './data/context/component-with-context-multi-root.raw.tsx',
+);
 
 const expressionState = getRawFile('./data/expression-state.raw.tsx');
 const contentState = getRawFile('./data/context-state.raw.tsx');
@@ -249,6 +252,7 @@ const OUTPUT_EVENT_BINDINGS_TEST: Tests = {
 
 const CONTEXT_TEST: Tests = {
   componentWithContext,
+  componentWithContextMultiRoot,
 };
 
 const JSX_TESTS: Tests[] = [
diff --git a/packages/core/src/generators/vue/blocks.ts b/packages/core/src/generators/vue/blocks.ts
index ca469eb787..2d4edd8de8 100644
--- a/packages/core/src/generators/vue/blocks.ts
+++ b/packages/core/src/generators/vue/blocks.ts
@@ -38,10 +38,11 @@ const NODE_MAPPERS: {
   [key: string]: BlockRenderer | undefined;
 } = {
   Fragment(json, options, scope) {
-    if (options.vueVersion === 2 && scope?.isRootNode) {
+    const children = json.children.filter(filterEmptyTextNodes);
+    if (options.vueVersion === 2 && scope?.isRootNode && children.length > 1) {
       throw new Error('Vue 2 template should have a single root element');
     }
-    return json.children.map((item) => blockToVue(item, options)).join('\n');
+    return children.map((item) => blockToVue(item, options)).join('\n');
   },
   For(_json, options) {
     const json = _json as ForNode;