diff --git a/packages/core/src/render3/foreign_view.ts b/packages/core/src/render3/foreign_view.ts
index 359577ec537..c610ef7303d 100644
--- a/packages/core/src/render3/foreign_view.ts
+++ b/packages/core/src/render3/foreign_view.ts
@@ -106,8 +106,12 @@ export function createForeignView(lContainer: LContainer, index: number): Foreig
   // 5. "Render" the view by creating the head and tail nodes, populating their slots, and marking
   // the view as created. This last step is normally handled by `renderView()` for native Angular
   // views with template functions.
-  const headComment = (lView[headTNode.index] = renderer.createComment(''));
-  const tailComment = (lView[tailTNode.index] = renderer.createComment(''));
+  const headComment = (lView[headTNode.index] = renderer.createComment(
+    ngDevMode ? 'foreign-view-head' : '',
+  ));
+  const tailComment = (lView[tailTNode.index] = renderer.createComment(
+    ngDevMode ? 'foreign-view-tail' : '',
+  ));
   lView[FLAGS] &= ~LViewFlags.CreationMode;
 
   // 6. Insert the view into the container
diff --git a/packages/core/test/render3/foreign_view_spec.ts b/packages/core/test/render3/foreign_view_spec.ts
index 43125c1bb33..452aa9195ba 100644
--- a/packages/core/test/render3/foreign_view_spec.ts
+++ b/packages/core/test/render3/foreign_view_spec.ts
@@ -123,7 +123,17 @@ describe('foreign views', () => {
     vcr2.insert(viewRef);
 
     expect(fixture.nativeElement.innerHTML).toBe(
-      '<div></div><!--container--><div></div><!----><span></span><span></span><!----><!--container-->',
+      '' +
+        '<div></div>' +
+        // First <div> container
+        '<!--container-->' +
+        '<div></div>' +
+        // Foreign view
+        '<!--foreign-view-head-->' +
+        '<span></span><span></span>' +
+        '<!--foreign-view-tail-->' +
+        // Second <div> container
+        '<!--container-->',
     );
   });