fix(core): handle shadow DOM encapsulated component with HMR (angular#59597)

When a component is created with shadow DOM encapsulation, we attach a shadow root to it. When the component is re-created during HMR, it was throwing an error because only one shadow root can be attached to a node at a time.

Since there's no way to detach a shadow root from a node, these changes resolve the issue by making a shallow clone of the element, replacing it and using the clone for any future updates.

Fixes angular#59588.

PR Close angular#59597

Author: crisbeto

packages/core/src/render3/hmr.ts

@@ -44,6 +44,7 @@ import {assertTNodeType} from './node_assert';
 import {destroyLView, removeViewFromDOM} from './node_manipulation';
 import {RendererFactory} from './interfaces/renderer';
 import {NgZone} from '../zone';
+import {ViewEncapsulation} from '../metadata/view';
 
 /**
  * Replaces the metadata of a component type and re-renders all live instances of the component.
@@ -149,7 +150,7 @@ function recreateLView(
   lView: LView<unknown>,
 ): void {
   const instance = lView[CONTEXT];
-  const host = lView[HOST]!;
+  let host = lView[HOST]! as HTMLElement;
   // In theory the parent can also be an LContainer, but it appears like that's
   // only the case for embedded views which we won't be replacing here.
   const parentLView = lView[PARENT] as LView;
@@ -159,6 +160,16 @@ function recreateLView(
   ngDevMode && assertNotEqual(newDef, oldDef, 'Expected different component definition');
   const zone = lView[INJECTOR].get(NgZone, null);
   const recreate = () => {
+    // If we're recreating a component with shadow DOM encapsulation, it will have attached a
+    // shadow root. The browser will throw if we attempt to attach another one and there's no way
+    // to detach it. Our only option is to make a clone only of the root node, replace the node
+    // with the clone and use it for the newly-created LView.
+    if (oldDef.encapsulation === ViewEncapsulation.ShadowDom) {
+      const newHost = host.cloneNode(false) as HTMLElement;
+      host.replaceWith(newHost);
+      host = newHost;
+    }
+
     // Recreate the TView since the template might've changed.
     const newTView = getOrCreateComponentTView(newDef);
 

packages/core/test/acceptance/hmr_spec.ts

@@ -26,6 +26,7 @@ import {
   ViewChild,
   ViewChildren,
   ViewContainerRef,
+  ViewEncapsulation,
   ɵNG_COMP_DEF,
   ɵɵreplaceMetadata,
 } from '@angular/core';
@@ -248,6 +249,65 @@ describe('hot module replacement', () => {
     );
   });
 
+  it('should replace a component using shadow DOM encapsulation', () => {
+    // Domino doesn't support shadow DOM.
+    if (isNode) {
+      return;
+    }
+
+    let instance!: ChildCmp;
+    const initialMetadata: Component = {
+      encapsulation: ViewEncapsulation.ShadowDom,
+      selector: 'child-cmp',
+      template: 'Hello <strong>{{state}}</strong>',
+      styles: `strong {color: red;}`,
+    };
+
+    @Component(initialMetadata)
+    class ChildCmp {
+      state = 0;
+
+      constructor() {
+        instance = this;
+      }
+    }
+
+    @Component({
+      standalone: true,
+      imports: [ChildCmp],
+      template: '<child-cmp/>',
+    })
+    class RootCmp {}
+
+    const fixture = TestBed.createComponent(RootCmp);
+    fixture.detectChanges();
+    const getShadowRoot = () => fixture.nativeElement.querySelector('child-cmp').shadowRoot;
+
+    markNodesAsCreatedInitially(getShadowRoot());
+    expectHTML(getShadowRoot(), `<style>strong {color: red;}</style>Hello <strong>0</strong>`);
+
+    instance.state = 1;
+    fixture.detectChanges();
+    expectHTML(getShadowRoot(), `<style>strong {color: red;}</style>Hello <strong>1</strong>`);
+
+    replaceMetadata(ChildCmp, {
+      ...initialMetadata,
+      template: `Changed <strong>{{state}}</strong>!`,
+      styles: `strong {background: pink;}`,
+    });
+    fixture.detectChanges();
+
+    verifyNodesWereRecreated([
+      fixture.nativeElement.querySelector('child-cmp'),
+      ...childrenOf(getShadowRoot()),
+    ]);
+
+    expectHTML(
+      getShadowRoot(),
+      `<style>strong {background: pink;}</style>Changed <strong>1</strong>!`,
+    );
+  });
+
   it('should continue binding inputs to a component that is replaced', () => {
     const initialMetadata: Component = {
       selector: 'child-cmp',
@@ -2071,7 +2131,7 @@ describe('hot module replacement', () => {
   function expectHTML(element: HTMLElement, expectation: string) {
     const actual = element.innerHTML
       .replace(/<!--(\W|\w)*?-->/g, '')
-      .replace(/\sng-reflect-\S*="[^"]*"/g, '');
+      .replace(/\s(ng-reflect|_nghost|_ngcontent)-\S*="[^"]*"/g, '');
     expect(actual.replace(/\s/g, '') === expectation.replace(/\s/g, ''))
       .withContext(`HTML does not match expectation. Actual HTML:\n${actual}`)
       .toBe(true);