在光照 DOM 中渲染光照元素以与 stripe.js 一起使用

Question

Stripe.js 尚不支持 shadow-dom。使用 Lit-elements 的 createRenderRoot() (documentation),(source)，您可以使用 return this; 将模板渲染到元素的灯光 DOM 中。但是，这仅在您在所有父元素中实现 createRenderRoot() 时才有效。有解决办法吗？

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

Answer 1

您正在使用 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 或其他一些根文档结构，它可能会失败。

Answer 2

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

Bennypowers 的 stripe-elements 为 Stripe.js 提供了一个在影子 DOM.

中工作的自定义元素包装器

在光照 DOM 中渲染光照元素以与 stripe.js 一起使用

Rendering a lit-element in light DOM to use with stripe.js

javascript

stripe-payments

web-component

shadow-dom

lit-element