Angular Elements：如何获取宿主Web Component元素的引用？

可以获取宿主<foo>元素的引用，但直接注入的ElementRef默认指向的是AppComponent自身的根DOM元素（即Shadow Root内部的组件内容容器），而非外部的<foo>宿主元素。要拿到宿主元素，需要借助Shadow DOM的API或DOM层级关系来获取：

方法一：通过Shadow Root的host属性获取 #

Angular Elements默认启用Shadow DOM，此时可以通过组件自身的ElementRef拿到Shadow Root，再访问其host属性得到宿主<foo>元素：

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

@Component({
  selector: 'app-root',
  template: `<p>App Component Content</p>`
})
export class AppComponent {
  constructor(private elRef: ElementRef) {
    // 获取Shadow Root节点
    const shadowRoot = this.elRef.nativeElement.getRootNode() as ShadowRoot;
    // 获取宿主<foo>元素
    const hostFooElement = shadowRoot.host;
    // 可对宿主元素进行属性读取、样式修改等操作
    console.log('宿主元素:', hostFooElement);
  }
}

方法二：关闭Shadow DOM时通过父节点获取 #

如果在创建自定义元素时显式关闭Shadow DOM（配置shadowDom: false），AppComponent的DOM会直接挂载在<foo>内部，此时宿主元素就是组件根元素的父节点：

// 在AppModule的ngDoBootstrap中关闭Shadow DOM
customElements.define('foo', createCustomElement(AppComponent, {
  injector: appRef.injector,
  shadowDom: false // 关闭Shadow DOM
}));

// 在AppComponent中获取宿主元素
export class AppComponent {
  constructor(private elRef: ElementRef) {
    const hostFooElement = this.elRef.nativeElement.parentNode;
    console.log('宿主元素:', hostFooElement);
  }
}

注意：第一种方法依赖浏览器对Shadow DOM的支持，现代主流浏览器均已兼容；若需适配旧浏览器，可选择关闭Shadow DOM使用第二种方法。

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