I've got a (Polymer) web component that I want to make accessible to people in a cross-origin resource sharing (CORS) fashion. That works fine except I'm not sure how I can give a relative path for resources like images and JSON files from JS code inside that component. They are interpreted as relative to the containing page, not relative to the HTML import. What I think I want is a JS variable that gives the path of the containing html file that was imported. A relative path is important because I also want people to be able to easily deploy this to their own site and not rely on a hardcoded path to my copy of a resource.
For example, you load index.html at example.com and it has:
<link rel="import" href="//my-site.com/components/my-component/my-component.html">
<my-component> ... </my-component>
Now inside my-component.html, I have some JS that loads some resources based on the user's profile - images and JSON language files for i18next.js. The problem is that unless I specify them as an absolute path to my-site.com, which I don't want to do, they will be interpreted as relative to the page at example.com/index.html, not relative to the path of my-component.html
Any images that I specify statically in my template work fine and load correctly because it's relative to the HTML Import path. I'm just not sure how to do this for resources loaded from JS because they will be relative to the containing page (example.com/index.html). Is there an attribute or function somewhere that exposes this import path? Thanks.
To create relative paths you can use the resolvePath method of your Polymer element. Here's the docs on it
ex: this.resolvePath('x-foo.png')
Update: resolvePath is replaced with resolveUrl for Polymer 1.0