ngx-intl-tel-input 配合 shadow DOM 使用时无法切换国家如何解决

问题根因 #

ngx-intl-tel-input 及其底层依赖的 intl-tel-input 库默认基于全局 document 实现元素查找、事件绑定和下拉框挂载，Shadow DOM 的隔离特性会阻止全局查询穿透到组件内部节点，同时默认挂载到 body 的下拉框和组件内部的交互事件无法跨 Shadow Root 触发，最终导致国家选择点击无响应、无法切换。

可用解决方案 #

方案1：关闭当前组件的Shadow DOM（适配成本最低） #

如果业务没有强制要求必须开启 Shadow DOM，直接修改组件的视图封装策略即可原生适配组件：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.css'],
  // 关闭Shadow DOM封装
  encapsulation: ViewEncapsulation.None
})
export class YourComponent {}

方案2：保留Shadow DOM的适配方案 #

如果必须保留 Shadow DOM，需要按以下步骤修改配置：

1. 在组件模板中新增下拉框挂载的占位节点，确保节点处于 Shadow Root 内部

<!-- 你的组件模板 -->
<div #dropdownMount></div>
<ngx-intl-tel-input [preferredCountries]="['cn', 'us']" [dropdownAppendTo]="dropdownMount"></ngx-intl-tel-input>

2. 手动注入组件样式到 Shadow Root，避免样式丢失：

import { Component, ViewChild, ElementRef, AfterViewInit, Renderer2, OnInit, OnDestroy } from '@angular/core';
// 导入依赖库样式文本，可根据项目构建工具调整导入方式
import ngxIntlTelInputStyles from '!raw-loader!ngx-intl-tel-input/build/css/ngx-intl-tel-input.css';
import intlTelInputStyles from '!raw-loader!intl-tel-input/build/css/intlTelInput.css';

@Component({
  selector: 'app-your-component',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.css']
})
export class YourComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('dropdownMount') dropdownMount: ElementRef;
  private originalQuerySelector: Function;

  constructor(private renderer: Renderer2, private hostEl: ElementRef) {}

  ngOnInit() {
    const shadowRoot = this.hostEl.nativeElement.shadowRoot;
    // Patch全局查询方法，优先在Shadow Root中查找元素
    this.originalQuerySelector = document.querySelector.bind(document);
    document.querySelector = (selector: string) => {
      const shadowEl = shadowRoot.querySelector(selector);
      return shadowEl || this.originalQuerySelector(selector);
    }
  }

  ngAfterViewInit() {
    // 把样式插入到Shadow Root中
    const shadowRoot = this.hostEl.nativeElement.shadowRoot;
    const styleEl1 = this.renderer.createElement('style');
    styleEl1.textContent = ngxIntlTelInputStyles;
    const styleEl2 = this.renderer.createElement('style');
    styleEl2.textContent = intlTelInputStyles;
    this.renderer.appendChild(shadowRoot, styleEl1);
    this.renderer.appendChild(shadowRoot, styleEl2);
  }

  ngOnDestroy() {
    // 组件销毁时恢复原生方法，避免影响全局逻辑
    document.querySelector = this.originalQuerySelector as any;
  }
}

若调整后仍有部分交互异常，可以根据实际报错信息，对应 patch document.querySelectorAll 等其他全局DOM方法即可。

内容的提问来源于stack exchange，提问作者Andrés Caro