html2canvas在Firefox正常运行Chrome报错，Angular转自定义元素后截图异常

• Chrome端的SyntaxError: Error parsing CSS component value, unexpected EOF报错核心和Angular自定义元素的Shadow DOM样式封装机制直接相关：
  • Angular自定义元素默认启用Shadow DOM封装，组件内部样式会注入到Shadow Root中，html2canvas默认不处理Shadow DOM内的样式规则
  • Chrome对CSS规则的解析校验比Firefox严格，碰到Shadow DOM下的空样式规则、Angular注入的内部占位样式、未闭合的伪类规则（如空的::host/::ng-deep规则）就会直接抛出解析异常，而Firefox会自动忽略无效规则继续执行
  • 你移除的只是页面全局CSS，Angular组件自身封装的样式并没有被移除，因此报错仍然存在
• Firefox端的this.ngElementStrategy is undefined报错是因为html2canvas遍历DOM节点时，尝试访问自定义元素挂载的Angular内部实例属性，该属性仅在Angular框架上下文中可访问，Firefox对该类访问失败仅抛出非阻塞错误，不影响截图流程。

优先尝试配置html2canvas适配Shadow DOM #

调用html2canvas时添加includeShadowDom: true配置项，开启对Shadow DOM内容的支持，示例代码：

html2canvas(targetNode, {
  includeShadowDom: true,
  // 其他原有配置
}).then(canvas => {
  // 后续处理逻辑
})

若配置后仍报错，关闭Angular组件的样式封装 #

在对应Angular组件的@Component装饰器中，将视图封装策略改为ViewEncapsulation.None，组件样式会直接注入到全局上下文，不再走Shadow DOM封装，从根源上规避html2canvas的Shadow DOM样式解析问题：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-chart-component',
  templateUrl: './your-chart-component.component.html',
  styleUrls: ['./your-chart-component.component.css'],
  encapsulation: ViewEncapsulation.None // 新增此行
})

修复Firefox非阻塞报错（可选） #

如果需要消除Firefox控制台报错，可以在html2canvas的onclone回调中清理自定义元素的内部Angular属性，或者在全局错误捕获逻辑中过滤掉包含ngElementStrategy is undefined关键词的报错即可，不影响功能运行。

额外排查项 #

检查组件的styles/styleUrls配置，删除空的样式条目、无内容的::host/::ng-deep规则，避免Chrome解析到无内容的CSS规则触发EOF异常。

内容的提问来源于stack exchange，提问作者Luca Asga