条纹元素不能安装在 ShadowRoot 中。 请安装在 Light DOM 中

Question

我一直在为我的发光元素项目使用 Stripe。 安装卡元素根本不起作用。 这是我正在使用的代码示例

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>
`

}

每次我运行它时，我都会收到以下错误

Uncaught (in promise) IntegrationError: Elements cannot bemounted in a ShadowRoot. 请安装在 Light DOM 中。

我知道我们在 Lit 元素中没有 DOM，但是我们如何在 shadowDom 中安装元素呢？

Answer 1

目前仍然没有支持，可能是由于 Stripe 目前是如何实现元素的（在支付框之外插入 iframe，在轻 DOM 级别上进行欺诈分析等，使用查询选择器来查找元素等）。

这里有一个第三方库可以创建 web 组件包装器。

或者，您可以简单地将条纹元素覆盖在视口中所需的 position 处。