question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support web components (shadow DOM encapsulation)

See original GitHub issue

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

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
crookedneighborcommented, Apr 20, 2020

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.

2reactions
ernsheongcommented, Nov 1, 2017

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!
Read more comments on GitHub >

github_iconTop Results From Across the Web

Using shadow DOM - Web Components | MDN
An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate ...
Read more >
Shadow DOM v1 - Self-Contained Web Components
Shadow DOM allows web developers to create compartmentalized DOM and CSS for web components.
Read more >
The Complete Web Component Guide: Shadow DOM - Medium
The Shadow DOM API is a key part of making the encapsulation of Web Components easy to implement. Shadow Trees enable us to...
Read more >
Shadow DOM - The Modern JavaScript Tutorial
Shadow DOM serves for encapsulation. It allows a component to have its very own “shadow” DOM tree, that can't be accidentally accessed from ......
Read more >
What Is Shadow Dom? - Supported By Mouseflow
Shadow DOM is a form of encapsulation, as Mouseflow veteran Morten Hornbæk explains in our Help article. Probably the most recognizable form of ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found