如何让Shadow DOM封装的Angular组件内SVG元素可通过Tab聚焦

问题背景 #

需要让包裹在使用ViewEncapsulation.ShadowDom的子组件内的SVG元素，通过Tab键正常聚焦，保持父组件中input→子组件SVG→input的Tab遍历顺序。当前直接在SVG的<g>标签添加tabindex="0"和focusable="true"无效，移除ShadowDom封装后可正常聚焦，但必须保留该封装方式。

核心原因 #

Shadow DOM是独立的DOM隔离环境，默认情况下，外部的Tab遍历不会进入Shadow DOM内部的元素，导致子组件内的SVG元素无法被Tab键选中。

解决方案 #

方案一：使用Shadow DOM的delegatesFocus属性（推荐） #

Angular 12及以上版本支持在Shadow DOM初始化时配置delegatesFocus，该属性会将Shadow DOM宿主的焦点委托给内部第一个可聚焦元素，同时让内部元素参与全局Tab流。

1. 子组件配置：

@Component({
  selector: 'child-component',
  templateUrl: './child-component.html',
  encapsulation: ViewEncapsulation.ShadowDom,
  shadowDomOptions: {
    delegatesFocus: true
  }
})
export class ChildComponent {
  doSomething() {
    // 点击事件逻辑
  }
}

2. 子组件HTML保持不变：

<svg>
  <g (click)="doSomething" tabindex="0"></g>
</svg>

方案二：手动处理焦点转发 #

如果无法使用delegatesFocus（比如低版本Angular），可以通过宿主元素的焦点事件手动将焦点转发到内部SVG元素：

1. 子组件配置：

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

@Component({
  selector: 'child-component',
  templateUrl: './child-component.html',
  encapsulation: ViewEncapsulation.ShadowDom,
  host: {
    '[tabindex]': '-1', // 宿主可聚焦但不参与默认Tab流
    '(focus)': 'onHostFocus()'
  }
})
export class ChildComponent {
  @ViewChild('focusableG') focusableG!: ElementRef;

  onHostFocus() {
    // 将焦点转移到内部的g元素
    this.focusableG.nativeElement.focus();
  }

  doSomething() {
    // 点击事件逻辑
  }
}

2. 子组件HTML添加模板引用：

<svg>
  <g #focusableG (click)="doSomething" tabindex="0"></g>
</svg>

验证效果 #

配置完成后，按Tab键即可按input→子组件内SVG的<g>元素→input的顺序正常遍历聚焦，同时保留ViewEncapsulation.ShadowDom的隔离效果。

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