I still owe you guys two more posts about Letsencrypt and Service Workers, but let me just share a short article about my struggle getting Recaptcha working in the Shadow DOM… and a crazy solution how to get such components working none the less.
- You can’t use the standard
<div class="g-recaptcha"></div>
, because Googles script simply won’t see it. - You can’t use the standard Javascript API rendering mechanism, because first of all most of the documentation uses it with an id reference (which isn’t going to be found inside the Shadow DOM), but even if you use a direct element reference there (which will actually show the Recaptcha box) we reach the most painful issue: Recaptcha stays stuck on the spinner after clicking the checkbox. And yes, I checked, it’s really the Shadow DOM causing the issue, likely due to some crazy callback to some global or something.
So how do we get it to work? By putting it in to the light DOM… which is far easier said than done. My solution boiled down to inserting the <script>
tag directly in to the head
, a callback function which I registered on the window
scope and using a simple promise I could await it’s completion in my element definition. By that point we’ve just reached a solution which would work with most other components, but sadly we can’t evade the never ending spinner of doom yet. But let me outline the above here first before continuing:
(function() {
var recaptcha = new Promise(function(resolve, reject){
window.recaptchaElementCallback = function() {
resolve(grecaptcha);
};
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
[...]
head.appendChild(script);
});
Polymer({
[...]
ready: function(){
recaptcha.then(function(grecaptcha){
rc.render(this.$.container, {sitekey: [...]});
});
So right now the easiest way to fix the before mentioned spinner of doom is by lifting even the component itself out of the Shadow DOM.
this.float = document.createElement('div');
this.float.style = 'position:absolute;';
document.body.appendChild(this.float);
recaptcha.then(function(grecaptcha){
rc.render(this.float, {
sitekey: '[...]'
});
and next display this float exactly above our own element (which we will conveniently give the same height as our the recaptcha box) by listening for iron-resize
events from a Polymer.IronResizableBehavior
triggering the following function
setLocationOfBodyFloat: function(){
var rect = this.getBoundingClientRect();
this.float.style.left = rect.left + 'px';
this.float.style.top = rect.top + 'px';
this.float.style.width = rect.width + 'px';
this.float.style.height = rect.height + 'px';
}
which will load up neatly on your desktop and actually work (the spinner resolves), but when you scroll the page or any scrolling parent container it will float in the wrong place, so we finish off with the following code in the attached
callback:
attached: function(){
parent = this;
while(parent = parent.parentNode){
parent.addEventListener('scroll', this.setLocationOfBodyFloat.bind(this));
}
},
Either way, I will of course release all this as a custom element at some point as well if I find the time, but I thought it would be valuable to write this up as well, just because it might be useful in more cases.
Thanks for this. I am using it to make a lit-element equivalent. I will shortly appear as one of the elements in my single page app I am building.
ReplyDeletehttps://github.com/akc42/football-mobile
I am currently just coding it and haven't started to test it yet, but I think I will need to add some more code in "setLocationOfBody" to add transform scale to it to resize to fit the element I am trying to load it over. But I need to start to test first to check default dimensions before doing the scaling.
I did use Polymer when it was first out, but I've been using lit-element for a while now. I have another web component app that I am still developing started in September 2012 on JQuery Mobile, switched to Polymer in Feb 2015 and to Lit-Element around about October 2018.