google-recaptcha:
[ This description is mirrored from README.md at github.com/Zecat/google-recaptcha on 2019-05-22 ]
<google-recaptcha>
A Polymer element for google recaptcha V2 and invisible.
<dom-bind>
<template is="dom-bind">
<google-recaptcha
force-in-body
value="{{token}}"
sitekey="6LdHISEUAAAAAN0FxtC5OBGQv-zrtj1tQ1Z_KUWf"
></google-recaptcha>
<span>[[token]]</span>
</template>
</dom-bind>
Install
bower install -S Zecat/google-recaptcha
Notes
- Promise polyfill is a dev dependency.
- Visit https://www.google.com/recaptcha/admin to get a sitekey.
Shadow DOM work-around
By-design, the google recaptcha doesn’t work inside shadow dom, so we detect
when it has a ShadowRoot parent and if so, the recaptcha is placed in a
container light DOM, which sync its size and screen position with its original
<google-recaptcha> parent, and the container is moved into the body.
The container is refit every time the user scroll or the <google-recaptcha> is
notified of resize. This is an expensive task but the only solution so far.