Support web components (shadow DOM encapsulation)
See original GitHub issueGeneral 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:
- From the top, search
shadowRoot
of elements recursively (naive) - Allow devs to pass target HTMLElement (shadowRoot) to the Braintree
create
function, replacingdocument
- …
Possible workarounds:
- Apps can use an iframe.
- 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) Use hosted fields integration(Update: looks likebraintree-web
also usesdocument.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:
- Created 6 years ago
- Comments:12 (6 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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:
Within
<my-app>
:Within
<my-payment>
: