如何在 Shadow 中加载 Square 支付表单 DOM

Question

我正在尝试为 Square Payment 表单创建一个 Web 组件，但无法将其加载到影子中 DOM。

我想知道这是否可行，因为表单中填充了来自 Square CDN 的脚本。

有人对这个用例有好感吗？

我正在使用 https://docs.connect.squareup.com/articles/adding-payment-form 上的示例代码并将其插入 Web 组件模板。

完整的代码示例在 Codepen 上。

https://codepen.io/kvnapavl/pen/BRQZrx?editors=1000#0

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>

<dom-module id="square-payment-form">

<template>

  // Square payment form code from https://docs.connect.squareup.com/articles/adding-payment-form

</template>

<script>

  Polymer({

    is: 'square-payment-form'

  });

  </script>

</dom-module>

Answer 1

此时您将无法使用影子内的Square电子商务表单dom。我建议将它放在光线下。

如何在 Shadow 中加载 Square 支付表单 DOM

How to Load Square Payment Form in Shadow DOM

javascript

square

shadow-dom

polymer

square-connect