渲染轻型DOM中的亮元素以与stripe.js一起使用

Question

Stripe.js does not yet support shadow-dom. Using Lit-elements's createRenderRoot() (documentation) , (source) you can render the template into the element's light DOM by using return this; . However this only works if you implement createRenderRoot() in all parent elements. Is there a way around this?

Here is my stackblitz example . It only works because I call createRenderRoot(){ return this; } createRenderRoot(){ return this; } on every element.

Answer 1

You are using document.getElementById(...) . When using shadowRoot, you should use:

this.shadowRoot.getElementById(...)

So, to mount idealBank, you could use:

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

The stripe.js lib may or may not work well with shadowRoot. If the lib uses document.getElementById or some other root-document construct, it may fail.

Answer 2

Morbidick's stripe-elements talks directly with the Stripe token backend. It doesnt use stripe.js so it doesn't have the same Shadow DOM restrictions. But tokens come with their own issues.

Bennypowers's stripe-elements offers a custom element wrapper for Stripe.js that works in shadow DOM.