Angular自定义组件不渲染求助：更新依赖后出现Shadow DOM异常

问题背景 #

更新某组件库npm包（该库大量组件改为Shadow DOM视图封装）后，自定义Angular组件app-folder-view突然停止渲染，同时出现错误：

DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support attachShadow

调试显示错误根因为NgRx action的调度，组件代码及模板如下：

组件代码（folder-view.component.ts） #

@Component({
  selector: "app-folder-view",
  templateUrl: "./folder-view.component.html",
  styleUrls: ["./folder-view.component.scss"],
  encapsulation: ViewEncapsulation.None,
})
export class FolderViewComponent implements OnInit, OnDestroy {
  constructor(
    ...
  ) {}
  ...
}

组件模板（folder-view.component.html） #

<div *ngIf="creationMode">
  <i class="icon-gen-information-small"></i><i> {{ infoMessage }}</i>
</div>
<div *ngIf="!creationMode">
  <card>
    <card-body>
      <div class="row align-items-center">
        ...
      </div>
      <div class="row">
        ...
      </div>
      <div class="row align-items-center">
        ...
      </div>
    </card-body>
  </card>
</div>

解决思路 #

1. 定位attachShadow错误的触发源 #

• 用浏览器开发者工具断点调试，找到具体是哪个元素触发了attachShadow失败。部分原生元素（如<iframe>、<img>、<input>等）本身不支持创建Shadow DOM，可能是组件库升级后，内部逻辑错误地在这类元素上尝试挂载shadowRoot，或是你的业务代码（NgRx action对应的副作用）中存在相关操作。
• 追踪NgRx action的执行链路：查看该action触发的所有副作用（如effect、reducer中涉及DOM操作的逻辑），确认是否调用了组件库新增的Shadow DOM相关API，且未做兼容性处理。

2. 修复组件渲染冲突 #

• 调整组件封装模式：将app-folder-view的encapsulation从ViewEncapsulation.None改为ViewEncapsulation.Emulated或ViewEncapsulation.ShadowDom。组件库全面改用Shadow DOM后，全局DOM/样式上下文发生变化，None模式下的组件可能因样式污染或DOM挂载逻辑冲突无法正常渲染。
• 检查模板中组件的兼容性：模板中的<card>、<card-body>现在是Shadow DOM封装组件，确认这些组件是否已在你的模块中正确导入，是否需要遵循组件库升级后的使用规则（如传入特定属性、通过插槽传递内容等）。

3. 排查组件库升级的影响 #

• 查阅组件库的升级文档/CHANGELOG：确认是否有针对自定义组件的兼容性说明，比如是否要求调整封装模式、是否需要引入新的依赖模块或配置项。
• 验证组件库组件的独立使用：单独在测试组件中使用<card>等组件，确认其在Shadow DOM模式下能正常渲染，排除组件本身的问题。

4. 修复变更检测异常 #

• Shadow DOM可能会干扰Angular的变更检测机制，尝试在NgRx action执行完成后，手动触发组件的变更检测：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 在NgRx action回调或副作用中调用
  someNgRxCallback() {
    // ...业务逻辑
    this.cdr.detectChanges();
  }
  

5. 调试DOM结构 #

• 用浏览器开发者工具查看app-folder-view元素的DOM结构：确认元素是否存在、是否生成了shadowRoot、模板内容是否被正确插入到DOM中，以此判断是组件未初始化还是内容未挂载。

内容的提问来源于stack exchange，提问作者Christian Krämer