I have been creating several custom Polymer-based web components which will allow third-party websites to embed content from our website on their site (think glorified iframes or a Google Maps widget). I am in the process of moving my components from my local dev environment, where they are working fine, onto our remote test environment. However I have run into an issue that is making me wonder if I have misunderstood how web components can be deployed and invoked.
My hope/assumption was that I would be able to "build" these web components into separate javascript and html files (using vulcanize and crisper) and then I would be able to host the resulting *.js and *.html files on my public server. Folks who wanted to embed some website content from my site on their site would use my webcomponents by referencing my Javascript file, for example:
<script src="https://www.example.com/assets/developer/webcomponents/mycomponent.build.js" defer="defer"></script>
and to my HTML file:
<link rel="import" href="https://www.example.com/developer/webcomponents/mycomponent.html" />
Unfortunately, I am finding that when my HTML component file is located remotely (not on the same server as the host webpage) the web component will not render. If that same HTML component file is located on the same server as the host web page, then the web component renders fine. I know this sounds like a classic a CORS issue, however I have enabled CORS on the remote server and I don't see any error messages in the Chrome developer console (which typically happens when there are CORS issues).
One theory is that this is a timing issue and the HTML import has not finished rendering before the Javascript kicks in (even though I specify "defer" in my script tag).
My other suspicion is that loading remote web components is not permitted. I haven't found any documentation to support this theory but all examples that I have found seem to host the web component javascript and html templates on the same server that is running the demo; though this could just be for convenience in a demo.
Does anybody have any idea what could be going on?
Loading remote web components is permitted, I've done that with a few projects. Users of your components should do the following:
The vulcanized JS should be included by you in the HTML file the users import, not directly referenced in the user's HTML page.