Support web components (shadow DOM encapsulation)

General information

• SDK/Library version: 1.8.0
• Environment: Sandbox
• Browser and OS: Chrome 61 on Mac

Issue description

https://github.com/braintree/braintree-web-drop-in/blob/master/src/dropin.js#L219 assumes that the container can be found in the global document scope.

For web components with shadow DOM encapsulation (https://developers.google.com/web/fundamentals/web-components/shadowdom), this does not work.

Some quick top of the head possible solutions:

1. From the top, search shadowRoot of elements recursively (naive)
2. Allow devs to pass target HTMLElement (shadowRoot) to the Braintree create function, replacing document
3. …

Possible workarounds:

1. Apps can use an iframe.
2. Devs can use Custom Elements without shadow DOM (but it has to be without shadow DOM all the way to the top in order to use document.querySelector, which is unlikely for Polymer framework)
3. Use hosted fields integration (Update: looks like braintree-web also uses document.querySelector, no go)

There would also be styling issues because global CSS styling will not work. Everything needs to reside within the payment component shadow DOM. Once passed the shadowRoot element the dropin should be able to inject CSS, in theory.

In fact, it would make much more sense for the dropin itself to be a web-component, in the future. This provides lighter encapsulation vs. iframe.

[crookedneighbor]

This is something we’re actively looking into again now that the PayPal SDK we use to offer PayPal has been updated to support it.

[ernsheong]

Happy to report that slotting from the top as demonstrated in https://github.com/braintree/braintree-web/issues/226#issuecomment-298020600 works very well for me. It’s an acceptable workaround. To note that the syntax for Polymer 2 is:

<my-app>
  <div slot="braintree"></div>
</my-app>

Within <my-app>:

<my-container>
  <my-payment>
    <slot name="braintree"></slot>
  </my-payment>
</my-container>

Within <my-payment>:

<div>Checkout</div>
<slot></slot> <-- drop in UI will appear here!