如何访问 Angular 中影子根元素下存在的 dom 元素

Question

<div>

<external-component>

#shadow-root

<div class="test">

<button value="submit"></button>

</div>

</external-component>

</div>

想要访问提交按钮。我尝试使用 ElementRef 我无法访问该元素，因为它存在于 ShadowDom 下。如果有人可以帮助我解决这个问题。

Answer 1

您可以像下面这样查询：

constructor(ele: ElementRef){}

//Inside your function
const shadowRoot: DocumentFragment = this.ele.nativeElement.shadowRoot;
const Button = shadowRoot.querySelector('button');