ViewEncapsulation.ShadowDom causes a blocked frame with origin "https://www.google.com" from accessing a cross-origin frame using firebase auth

0
votes

I'm trying to use angular firebase auth for sign in with phone number in angular, I've to use shadow dom in all components of my project, so when recaptcha is rendered I have this problem.

problem

The recaptcha is render but still loading after checked

My code:

ngOnInit() {
    const shadowRoot: DocumentFragment = this.ele.nativeElement.shadowRoot;
    const recpa = shadowRoot.getElementById('recaptcha-container');
    this.showError = false;
    this.windowRef = this.userAuth.getWindowRef();
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(recpa);
    this.windowRef.recaptchaVerifier.render();
}

How can I make it works ?

angularfirebaseshadow-dom