I have been using Stripe for my lit element project. The mounting the card element doesn't works at all. Here is my code sample that I am using

import { LitElement, html, css, property, query } from "lit-element";
import { connect } from "pwa-helpers";
import { store } from "../redux/store";
import { loadStripe } from '@stripe/stripe-js';

export class Checkout extends connect(store)(LitElement) {

async init() {
    stripe = await loadStripe(clientSecret);
    element = stripe.elements();
    card = element.create('card');
    card.mount(this.shadowRoot.querySelector('#stripe-payment-form'));
 }
render() {
return html`
    <div id="stripe-payment-form"></div>
`

}

Every time I run this I am getting the following error

Uncaught (in promise) IntegrationError: Elements cannot be mounted in a ShadowRoot. Please mount in the Light DOM.

I know we don't have DOM in Lit element, but how can we mount the element in shadowDom?