fix(elements): allow custom elements to be detached and reattached

lmartorella · lmartorella · commit 90b516c077a8 · 2025-10-02T19:24:09.000+02:00
Allows Angular elements to remains detached from DOM and reattached later, without breaking it. Fixes angular#38778
diff --git a/packages/elements/src/component-factory-strategy.ts b/packages/elements/src/component-factory-strategy.ts
@@ -14,6 +14,7 @@ import {
   ComponentFactory,
   ComponentFactoryResolver,
   ComponentRef,
+  EmbeddedViewRef,
   EventEmitter,
   Injector,
   NgZone,
@@ -143,14 +144,51 @@ export class ComponentNgElementStrategy implements NgElementStrategy {
       // Schedule the component to be destroyed after a small timeout in case it is being
       // moved elsewhere in the DOM
       this.scheduledDestroyFn = scheduler.schedule(() => {
+        this.scheduledDestroyFn = null;
         if (this.componentRef !== null) {
+          // Save old position of the element node, to maintain it attached even
+          // after the this.componentRef.destroy, that detach it from parent
+          const attachInfo = this.getElementAttachPoint();
+          // Prepare back properties from componentRef to `initialInputValues`
+          this.resetProperties();
           this.componentRef.destroy();
           this.componentRef = null;
+          // Reattach the destroyed empty html element to the parent
+          if (attachInfo) {
+            const {parent, viewNode, beforeOf} = attachInfo;
+            parent.insertBefore(viewNode, beforeOf);
+          }
         }
       }, DESTROY_DELAY);
     });
   }
 
+  /**
+   * Get the current attach point of the custom element and his position
+   */
+  private getElementAttachPoint():
+    | {parent: HTMLElement; viewNode: HTMLElement; beforeOf: ChildNode}
+    | undefined {
+    const hostView = this.componentRef!.hostView as EmbeddedViewRef<unknown>;
+    const viewNode = hostView?.rootNodes?.[0] as HTMLElement;
+    const parent = viewNode?.parentElement!;
+    if (!parent) {
+      return;
+    }
+    const index = parent && Array.from(parent.childNodes).indexOf(viewNode);
+    const beforeOf = parent && parent.childNodes.item(index + 1);
+    return {parent, viewNode, beforeOf};
+  }
+
+  /**
+   * Copy back live properties from the componentRef (about to be destroyed) to initialInputValues for future reattach
+   */
+  private resetProperties() {
+    this.componentFactory.inputs.forEach((input) => {
+      this.initialInputValues.set(input.propName, this.componentRef!.instance[input.propName]);
+    });
+  }
+
   /**
    * Returns the component property value. If the component has not yet been created, the value is
    * retrieved from the cached initialization values.
diff --git a/packages/elements/test/reconnect_spec.ts b/packages/elements/test/reconnect_spec.ts
@@ -0,0 +1,196 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+  Component,
+  ComponentFactoryResolver,
+  destroyPlatform,
+  Input,
+  NgModule,
+  ViewEncapsulation,
+} from '@angular/core';
+import {BrowserModule, platformBrowser} from '@angular/platform-browser';
+import {createCustomElement} from '../src/create-custom-element';
+
+const tick = (ms: number) => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+describe('Reconnect', () => {
+  let testContainer: HTMLDivElement;
+
+  beforeAll((done) => {
+    testContainer = document.createElement('div');
+    document.body.appendChild(testContainer);
+    destroyPlatform();
+    platformBrowser()
+      .bootstrapModule(TestModule)
+      .then((ref) => {
+        const injector = ref.injector;
+        const cfr: ComponentFactoryResolver = injector.get(ComponentFactoryResolver);
+
+        testElements.forEach((comp) => {
+          const compFactory = cfr.resolveComponentFactory(comp);
+          customElements.define(compFactory.selector, createCustomElement(comp, {injector}));
+        });
+      })
+      .then(done, done.fail);
+  });
+
+  afterAll(() => {
+    destroyPlatform();
+    testContainer.remove();
+    (testContainer as any) = null;
+  });
+
+  it('should be able to rebuild and reconnect after direct disconnection from parent', async () => {
+    // Create and attach it
+    const tpl = `<reconnect-el test-attr="a"></reconnect-el>`;
+    testContainer.innerHTML = tpl;
+    // Check that the Angular element was created and attributes are bound
+    expect(testContainer.querySelector('.test-attr-outlet')!.textContent).toBe('a');
+    // Check that the Angular element was bound to properties too
+    const testEl = testContainer.querySelector<Element & ReconnectTestComponentEl>('reconnect-el')!;
+    testEl.testProp = 'b';
+    // Wait change to be propagated
+    await tick(10);
+    expect(testContainer.querySelector('.test-prop-outlet')!.textContent).toBe('b');
+    // Now detach the element from the container
+    testContainer.removeChild(testEl);
+    // Wait for detach timer
+    await tick(10);
+    // Check that the web-element is orphan and the Angular Component is destroyed
+    expect(testEl.parentElement).toBeFalsy();
+    // Check property values to be maintained
+    expect(testEl.testProp).toBe('b');
+
+    // Now reattach root to testContainer
+    testContainer.appendChild(testEl);
+    // Check for re-render, but with the same instance of web-element
+    expect(
+      testContainer.querySelectorAll<Element & ReconnectTestComponentEl>('reconnect-el').length,
+    ).toBe(1);
+    expect(
+      testContainer.querySelectorAll<Element & ReconnectTestComponentEl>('.reconnect-el').length,
+    ).toBe(1);
+    expect(testContainer.querySelectorAll('.test-attr-outlet').length).toBe(1);
+    expect(testContainer.querySelectorAll('.test-prop-outlet').length).toBe(1);
+    expect(testContainer.querySelector('.test-attr-outlet')!.textContent).toBe('a');
+    expect(testContainer.querySelector('.test-prop-outlet')!.textContent).toBe('b');
+  });
+
+  it('should be able to rebuild and reconnect after indirect disconnection via parent node', async () => {
+    const tpl = `<div class="root"><reconnect-el test-attr="a"></reconnect-el></div>`;
+    testContainer.innerHTML = tpl;
+    const root = testContainer.querySelector<HTMLDivElement>('.root')!;
+    // Check that the Angular element was created and attributes are bound
+    expect(testContainer.querySelector('.test-attr-outlet')!.textContent).toBe('a');
+    // Check that the Angular element was bound to properties too
+    const testEl = testContainer.querySelector<Element & ReconnectTestComponentEl>('reconnect-el')!;
+    testEl.testProp = 'b';
+    // Wait change to be propagated
+    await tick(10);
+    expect(testContainer.querySelector('.test-prop-outlet')!.textContent).toBe('b');
+
+    // Now detach the root from the DOM
+    testContainer.removeChild(root);
+    // Wait for detach timer
+    await tick(10);
+    // Check that the web-element is still under root, but the Angular Component is destroyed
+    expect(testEl.parentElement).toBe(root);
+    // Check property values to be maintained
+    expect(testEl.testProp).toBe('b');
+
+    // Now reattach root to testContainer
+    testContainer.appendChild(root);
+    // Check for re-render, but with the same instance of web-element
+    expect(testContainer.querySelector<Element & ReconnectTestComponentEl>('reconnect-el')).toBe(
+      testEl,
+    );
+    expect(
+      testContainer.querySelectorAll<Element & ReconnectTestComponentEl>('reconnect-el').length,
+    ).toBe(1);
+    expect(
+      testContainer.querySelectorAll<Element & ReconnectTestComponentEl>('.reconnect-el').length,
+    ).toBe(1);
+    expect(testContainer.querySelectorAll('.test-attr-outlet').length).toBe(1);
+    expect(testContainer.querySelectorAll('.test-prop-outlet').length).toBe(1);
+    expect(testContainer.querySelector('.test-attr-outlet')!.textContent).toBe('a');
+    expect(testContainer.querySelector('.test-prop-outlet')!.textContent).toBe('b');
+  });
+
+  it('should be able to rebuild and reconnect after indirect disconnection via parent node, with slots', async () => {
+    const tpl = `<div class="root"><reconnect-slotted-el><span class="projected"></span></reconnect-slotted-el></div>`;
+    testContainer.innerHTML = tpl;
+    const root = testContainer.querySelector<HTMLDivElement>('.root')!;
+    const testEl = testContainer.querySelector('reconnect-slotted-el')!;
+
+    // Check that the Angular element was created and slots are projected
+    {
+      const content = testContainer.querySelector('span.projected')!;
+      const slot = testEl.shadowRoot!.querySelector('slot') as HTMLSlotElement;
+      const assignedNodes = slot.assignedNodes();
+      expect(assignedNodes[0]).toBe(content);
+    }
+
+    // Now detach the root from the DOM
+    testContainer.removeChild(root);
+    // Wait for detach timer
+    await tick(10);
+
+    // Check that the web-element is still under root, but the Angular Component is destroyed
+    expect(testEl.parentElement).toBe(root);
+
+    // Now reattach root to testContainer
+    testContainer.appendChild(root);
+    // Check for re-render, but with the same instance of web-element
+    expect(testContainer.querySelectorAll('reconnect-slotted-el').length).toBe(1);
+    expect(testEl.shadowRoot!.querySelectorAll('.reconnect-slotted-el').length).toBe(1);
+
+    // Check that the Angular element was re-created and slots are still projected
+    {
+      const content = testContainer.querySelector('span.projected')!;
+      const slot = testEl.shadowRoot!.querySelector('slot') as HTMLSlotElement;
+      const assignedNodes = slot.assignedNodes();
+      expect(assignedNodes[0]).toBe(content);
+    }
+  });
+});
+
+interface ReconnectTestComponentEl {
+  testProp: string;
+}
+
+@Component({
+  selector: 'reconnect-el',
+  template:
+    '<div class="reconnect-el"><p class="test-prop-outlet">{{testProp}}</p><p class="test-attr-outlet">{{testAttr}}</p></div>',
+  standalone: false,
+})
+class ReconnectTestComponent implements ReconnectTestComponentEl {
+  @Input() testAttr: string = '';
+  @Input() testProp: string = '';
+  constructor() {}
+}
+
+@Component({
+  selector: 'reconnect-slotted-el',
+  template: '<div class="reconnect-slotted-el"><slot></slot></div>',
+  encapsulation: ViewEncapsulation.ShadowDom,
+  standalone: false,
+})
+class ReconnectSlottedTestComponent {
+  constructor() {}
+}
+
+const testElements = [ReconnectTestComponent, ReconnectSlottedTestComponent];
+
+@NgModule({imports: [BrowserModule], declarations: testElements})
+class TestModule {
+  ngDoBootstrap() {}
+}
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
@@ -522,7 +522,14 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
     private sharedStylesHost?: SharedStylesHost,
   ) {
     super(eventManager, doc, ngZone, platformIsServer, tracingService);
-    this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});
+    this.shadowRoot = (hostEl as Element).shadowRoot;
+    if (!this.shadowRoot) {
+      this.shadowRoot = (hostEl as Element).attachShadow({mode: 'open'});
+    } else {
+      // In case of custom elements, it is possible that the host element was already initialized during the
+      // element life-cycle (after a disconnect/reconnect)
+      this.shadowRoot.innerHTML = '';
+    }
 
     // SharedStylesHost is used to add styles to the shadow root by ShadowDom.
     // This is optional as it is not used by IsolatedShadowDom.
