feat(core): add host node to DeferBlockData (#66546)

Add the host/container comment node to the `DeferBlockData`. This node can be used as a `@defer` block locator in the DOM tree in the absence of root nodes.

PR Close #66546

Author: hawkgs

packages/core/src/render3/util/defer.ts

@@ -27,7 +27,7 @@ import {assertLView} from '../assert';
 import {collectNativeNodes} from '../collect_native_nodes';
 import {getLContext} from '../context_discovery';
 import {CONTAINER_HEADER_OFFSET, NATIVE} from '../interfaces/container';
-import {INJECTOR, LView, TVIEW} from '../interfaces/view';
+import {HOST, INJECTOR, LView, TVIEW} from '../interfaces/view';
 import {getNativeByTNode} from './view_utils';
 
 /** Retrieved information about a `@defer` block. */
@@ -65,6 +65,9 @@ export interface DeferBlockData {
   /** Stringified version of the block's triggers. */
   triggers: string[];
 
+  /** The comment host/container node next to which all of the root nodes are rendered. */
+  hostNode: Node;
+
   /** Element root nodes that are currently being shown in the block. */
   rootNodes: Node[];
 }
@@ -156,6 +159,7 @@ function findDeferBlocks(node: Node, lView: LView, results: DeferBlockData[]) {
         minimumTime: tDetails.placeholderBlockConfig?.[MINIMUM_SLOT] ?? null,
       },
       triggers: tDetails.debug?.triggers ? Array.from(tDetails.debug.triggers).sort() : [],
+      hostNode: details.lContainer[HOST] as Node,
       rootNodes,
     };
 

packages/core/test/acceptance/defer_utils_spec.ts

@@ -301,6 +301,26 @@ describe('@defer debugging utilities', () => {
     await block.render(DeferBlockState.Complete);
   });
 
+  it('should return the host comment node of the currently-rendered block', () => {
+    @Component({
+      template: `
+        @defer (when false) {
+          Loaded
+        }
+      `,
+    })
+    class App {}
+
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    const results = getDeferBlocks(fixture.nativeElement);
+
+    expect(results.length).toBe(1);
+    expect(results[0].hostNode).toBeTruthy();
+    expect(stringifyNodes([results[0].hostNode])).toEqual(['Comment(container)']);
+  });
+
   function stringifyNodes(nodes: Node[]): string[] {
     return nodes.map((node) => {
       switch (node.nodeType) {