Визуализация освещенного элемента в легком DOM для использования с stripe.js

Question

Stripe.js еще не поддерживает shadow-dom.Используя Lit-elements createRenderRoot() (документация) , (источник) , вы можете визуализировать шаблон в DOM элемента с помощью return this;.Однако это работает, только если вы реализуете createRenderRoot() во всех родительских элементах.Есть ли способ обойти это?

Вот мой стек пример .Это работает только потому, что я вызываю createRenderRoot(){ return this; } для каждого элемента.

Answer 1

Morbidick stripe-elements напрямую взаимодействует с бэкэндом токена Stripe.Он не использует stripe.js, поэтому у него нет тех же ограничений Shadow DOM.Но токены имеют свои собственные проблемы.

В stripe-elements от Bennypowers есть специальный упаковщик элементов для Stripe.js, который работает в теневом DOM.

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.Если в библиотеке используется document.getElementById или какая-либо другая конструкция корневого документа, это может привести к сбою.