diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index af8139f3db..19fedebfb4 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2676,6 +2676,7 @@ export namespace Components {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable": boolean;
+        "segmentViewId"?: string;
         /**
           * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
          */
@@ -7491,6 +7492,7 @@ declare namespace LocalJSX {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable"?: boolean;
+        "segmentViewId"?: string;
         /**
           * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
          */
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 34a0c04146..d65ef24adf 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -33,6 +33,8 @@ export class Segment implements ComponentInterface {
 
   @State() activated = false;
 
+  @Prop() segmentViewId?: string;
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -153,7 +155,10 @@ export class Segment implements ComponentInterface {
   connectedCallback() {
     this.emitStyle();
 
-    this.segmentViewEl = this.getSegmentView();
+    const segmentViewEl = this.getSegmentView();
+    if (segmentViewEl) {
+      this.segmentViewEl = segmentViewEl;
+    }
 
     if (this.segmentViewEl) {
       this.getButtons().forEach((ref) => (ref.hasIndicator = false));
@@ -370,6 +375,14 @@ export class Segment implements ComponentInterface {
   }
 
   private getSegmentView() {
+    if (this.segmentViewId) {
+      const segmentView = document.getElementById(this.segmentViewId);
+
+      if (segmentView && segmentView.tagName === 'ION-SEGMENT-VIEW') {
+        return segmentView as HTMLIonSegmentViewElement;
+      }
+    }
+
     const buttons = this.getButtons();
     // Get the first button with a contentId
     const firstContentId = buttons.find((button: HTMLIonSegmentButtonElement) => button.contentId);
@@ -540,7 +553,7 @@ export class Segment implements ComponentInterface {
     }
 
     const content = document.getElementById(button.contentId);
-    const segmentView = content?.closest('ion-segment-view');
+    const segmentView = this.segmentViewEl ?? content?.closest('ion-segment-view');
 
     if (segmentView) {
       segmentView.setContent(button.contentId, smoothScroll);
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index aa28a5b56c..1564df8320 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -1952,14 +1952,14 @@ This event will not emit when programmatically setting the `value` property.
 
 
 @ProxyCmp({
-  inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value']
+  inputs: ['color', 'disabled', 'mode', 'scrollable', 'segmentViewId', 'selectOnFocus', 'swipeGesture', 'value']
 })
 @Component({
   selector: 'ion-segment',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'],
+  inputs: ['color', 'disabled', 'mode', 'scrollable', 'segmentViewId', 'selectOnFocus', 'swipeGesture', 'value'],
 })
 export class IonSegment {
   protected el: HTMLElement;
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index f64ee29627..0224488d6a 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -732,6 +732,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar, JSX.
 
 
 export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment, JSX.IonSegment["value"]>('ion-segment', defineIonSegment, [
+  'segmentViewId',
   'color',
   'disabled',
   'scrollable',