Fix: make rerenders work after DocumentFragment is appended to DOM

- bounds.ts clear(): use first.parentNode (live parent) instead of stored
  parentElement(), so removal targets the real container after fragment append
- element-builder.ts resume(): capture live parent from firstNode().parentNode
  before resetting, so new content renders into the container not the fragment
- element-builder.ts RemoteBlock destructor: check firstNode().parentNode !== null
  (node still attached) instead of === parentElement() (node in original parent),
  so in-element/DocumentFragment targets get cleaned up correctly on destroy
- Update test to attach fragment first, then rerender and verify updates work

Agent-Logs-Url: https://github.com/emberjs/ember.js/sessions/6f1bf405-84ab-4bd5-b42d-f061fadcf4df

Co-authored-by: NullVoxPopuli <[email protected]>

Author: Copilot

packages/@glimmer-workspace/integration-tests/lib/suites/in-element-document-fragment.ts

@@ -133,7 +133,7 @@ export class InElementDocumentFragmentSuite extends RenderTest {
   }
 
   @test
-  'Rerenders in a detached DocumentFragment, then content is visible after attaching to DOM'(
+  'Rerenders work after DocumentFragment is appended to the DOM'(
     assert: typeof QUnit.assert
   ) {
     const fragment = document.createDocumentFragment();
@@ -160,27 +160,33 @@ export class InElementDocumentFragmentSuite extends RenderTest {
 
     assert.verifySteps(['initial'], 'initial render fires step from inside fragment');
 
-    // Rerender while still detached: text update
+    // Move the fragment's children into the container. After this the fragment is
+    // empty, but the rendered nodes (including Glimmer's bounds markers) are live
+    // children of `container`.
+    container.appendChild(fragment);
+    assert.strictEqual(fragment.childNodes.length, 0, 'fragment is empty after append');
+    assert.ok(container.querySelector('#msg'), 'paragraph is present in container after append');
+
+    // Rerenders should continue to work after the fragment is attached — Glimmer
+    // resolves the live parent from the bounds markers' actual parentNode.
     this.rerender({ message: 'updated' });
-    assert.verifySteps(['updated'], 'text update fires step while fragment is still detached');
+    assert.verifySteps(['updated'], 'text update fires step after fragment was attached to DOM');
+    assert.strictEqual(
+      container.querySelector('#msg')?.textContent,
+      'updated',
+      'paragraph text is updated in container'
+    );
 
-    // Rerender while still detached: conditional element appears
+    // New conditional element should appear in the container.
     this.rerender({ show: true });
     assert.verifySteps(
       ['extra rendered'],
-      'conditional element step fires while fragment is still detached'
+      'conditional element step fires in container after fragment was attached to DOM'
+    );
+    assert.ok(
+      container.querySelector('#extra'),
+      'conditional span appears in container after fragment was attached to DOM'
     );
-
-    // Move the fragment's children into the container; after this the fragment is empty
-    // but the rendered nodes (including the reactive text and the conditional span) are
-    // now live children of `container`.
-    container.appendChild(fragment);
-    assert.strictEqual(fragment.childNodes.length, 0, 'fragment is empty after append');
-
-    const p = container.querySelector('#msg');
-    const span = container.querySelector('#extra');
-    assert.ok(p, 'paragraph is present in container');
-    assert.ok(span, 'conditional span is present in container');
   }
 
   @test

packages/@glimmer/runtime/lib/bounds.ts

@@ -53,10 +53,15 @@ export function move(bounds: Bounds, reference: Nullable<SimpleNode>): Nullable<
 }
 
 export function clear(bounds: Bounds): Nullable<SimpleNode> {
-  let parent = bounds.parentElement();
   let first = bounds.firstNode();
   let last = bounds.lastNode();
 
+  // Use the node's actual current parent rather than the stored parentElement.
+  // When bounds were rendered into a DocumentFragment that was subsequently
+  // appended to a real DOM container, the nodes' parentNode is the container
+  // while parentElement() still returns the (now-empty) fragment.
+  let parent = (first.parentNode as Nullable<SimpleElement>) ?? bounds.parentElement();
+
   let current: SimpleNode = first;
 
   while (true) {

packages/@glimmer/runtime/lib/vm/element-builder.ts

@@ -96,7 +96,12 @@ export class NewTreeBuilder implements TreeBuilder {
   }
 
   static resume(env: Environment, block: ResettableBlock): NewTreeBuilder {
-    let parentNode = block.parentElement();
+    // Capture the live parent before resetting, because the bounds may have been
+    // rendered into a DocumentFragment that was subsequently appended to a real
+    // DOM container. In that case firstNode().parentNode is the container while
+    // parentElement() still returns the original (now-empty) fragment.
+    let parentNode =
+      (block.firstNode().parentNode as SimpleElement | null) ?? block.parentElement();
     let nextSibling = block.reset(env);
 
     let stack = new this(env, parentNode, nextSibling).initialize();
@@ -500,7 +505,12 @@ export class RemoteBlock extends AppendingBlockImpl {
       // and avoid clearing the node if it was. In most cases this shouldn't happen,
       // so this might hide bugs where the code clears nested nodes unnecessarily,
       // so we should eventually try to do the correct fix.
-      if (this.parentElement() === this.firstNode().parentNode) {
+      //
+      // Note: we check firstNode().parentNode !== null (node still has a parent)
+      // rather than === parentElement() (node is in the original parent), so that
+      // {{#in-element}} into a DocumentFragment still clears correctly after the
+      // fragment's children are moved to a real DOM container via appendChild().
+      if (this.firstNode().parentNode !== null) {
         clear(this);
       }
     });