Widget not deleted properly

[ghost]

I'm using the widget inside a component that's shown or hidden in a form, and I found out that when I hide the container component, the recaptcha is still shows, but in the top-left corner, above anything else.
I solved this setting the restamp="true" in the container component, and modifying the detached method as follows:

  detached: function() {
    // TODO: remove event listener
    this.container.remove();
  },

Do you think it can be the correct approach?
Thanks
Andrea

[Zecat]

Hi, the initial problem is the recaptcha doesn't work inside shadow dom, so it is appended to the body in case it has a shadow root parent. So when you hide your form, the widget might no longer be inside.

You can use the hidden property that handles the work of hiding the in-body widget, ex:

<template is="dom-if" if="[[condition]]">
  <google-recaptcha hidden="[[!condition]]" ... ></google-recaptcha>
  ...
</template>

And you're right, the container has to be removed when detached, submit a PR if you want ;)

[Zecat]

Oops remove() is not supported on IE11. Maybe something like

this.container && Polymer.dom(Polymer.dom(this.container).parentNode).removeChild(this.container);

or after all it only has to be remove when in-body

this.inBody && this.container && document.body.removeChild(this.container);

I'm not sure, I did'nt test that code