Components which refuse to live in the Shadows

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.

1. You can’t use the standard <div class="g-recaptcha"></div>, because Googles script simply won’t see it.
2. 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.