relative path resources from JS with HTML imports

Question

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 c

Answer 1

I found out that you can access the URL of the import from within a script inside it with document.currentScript.baseURI. I'm doing something like this:

<script>
    (function () {
        var srcURL = new window.URL(document.currentScript.baseURI);
        var baseURL = srcURL.origin + srcURL.pathname.substr(0, srcURL.pathname.lastIndexOf("/") + 1);

        // can use baseURL here to load resources
        Polymer({...});
    })();
</script>

One problem: the code above isn't working when I vulcanize everything because the paths change. I'll look into that one a bit later.

Answer 2

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