javascript - 在 light DOM 中渲染一个 lit-element 以与 stripe.js 一起使用

Question

Stripe.js 还不支持 shadow-dom。使用 Lit-elements 的createRenderRoot() (documentation) , (source) 您可以使用return this;. 但是，这仅在您createRenderRoot()在所有父元素中实现时才有效。有没有解决的办法？

这是我的 stackblitz示例。它之所以有效，是因为我调用createRenderRoot(){ return this; }了每个元素。

Answer 1

Morbidick 的stripe-elements直接与 Stripe 令牌后端对话。它不使用 stripe.js，因此它没有相同的 Shadow DOM 限制。但是代币也有自己的问题。

Bennypowers 的stripe-elements为在 shadow DOM 中工作的 Stripe.js 提供了一个自定义元素包装器。

Answer 2

您正在使用document.getElementById(...). 使用 shadowRoot 时，您应该使用：

this.shadowRoot.getElementById(...)

因此，要挂载 IdealBank，您可以使用：

// Add an instance of the idealBank Element into the `ideal-bank-element` <div>.
const bankElement = this.shadowRoot.querySelector('#ideal-bank-element');
idealBank.mount(bankElement);

stripe.js 库可能适用于也可能不适用于 shadowRoot。如果 lib 使用 document.getElementById 或其他一些根文档结构，它可能会失败。