Creating forms does not work inside Polymer elements?


#1

I am usign the HubSpot JavaScript API to create a form on a web page (see the code sample below). This works as it should when the host element for the form (<div id=“form-host-id”></div>) is inside the main page content.

hbspt.forms.create({
    css: '',
    portalId: 'portal-id',
    formId: 'form-id',
    target: '#form-host-id'
});

However, when I try to use this API to create a form inside a Polymer-based web component, I get an error: “Couldn’t find target container #horm-host-id for HubSpot Form [form-id]. Not rendering form onto the page”. I guess this has to do with HubSpot trying to find the target element using document.querySelector() API which does not work for selecting elements inside a web component’s shadow DOM (as discussed here).

So, the question is how to create a Hubspot form inside a web component’s shadow DOM. Is there any way to pass an HTMLElement reference instead of a CSS selector to hbspt.forms.create()? Or is there any other option?