How can I access dom element which is present under the shadow root element in Angular

Question

<div>

<external-component>

#shadow-root

<div class="test">

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

</div>

</external-component>

</div>

Want to access submit button. I have tried using ElementRef I am not able to access the element, because it's present under shadowDom. If any one can help me about this.

Answer 1

You can query like below:

constructor(ele: ElementRef){}

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