Relative paths in custom component library

Question

I have project with structure that looks like this

-client
----index.html
----index.ts
-core
----controls
--------myControl.html
--------myControl.ts
----css
--------common.css

myControl.html contains definition of custom component that is registered via shadow dom. in its template imports common.css that is part of "core" library:

<template id="t">
    <style>
        @import url('../css/common.css');
    ....
    </style>
    ....
</template>
<script>
  (function() {
      var importDoc = document.currentScript.ownerDocument; // importee

      var proto = Object.create(HTMLElement.prototype);

      proto.createdCallback = function() 
      {
          // get template in import
          var template = importDoc.querySelector('#t');

          // import template into
          var clone = document.importNode(template.content, true);

          var root = this.createShadowRoot();
          root.appendChild(clone);

          var control = this;

          System.import('core/controls/myControl').then(function(m)
          {
              var t = new m.myControl(control.shadowRoot);
          });
      };

      document.registerElement('my-control', {prototype: proto});
  })();
</script>

Now when I use my-control on the index.html the browser complains that it cannot import common.css. Because it search for it using path relative to index.html, not relative to its originall location. I understand this is logical because we have created shadow dom from the script that runs in context of index.html.

My question is: how should I develop my-control custom component that is part of 'core' library that can be reused/distributed in different places and still correctly reference resources like css/images/etc that are also part of the 'core' library.

Thanks in advance.

score 1 · Answer 1 · answered Oct 05 '15 at 19:26

Can you use absolute URLs?

Post /deep/ deprecation same as you, css @injects is the way we have been applying a common styling across our components.

But how to identify path of common style?

First to give some context, we host our components in a single vulcanized html file and clients use html imports to use it in their applications. Now in this imports.html we have included a small script which identifies its own URL using document.currentScript.ownerDocument.baseURI and since we know the path of common css relative of imports.html, we construct this url on the fly and inject constructed style tags containing css @imports inside templates.

That way, when component gets updated(when shadow-root gets attached to it) it makes a call to download common.css(since it knows the absolute url) and uses it inside shadow dom.

So, to summarize don't hardcode style tag with css @import inside template construct it based on your current url of imported html and inject it inside template.

something like this perhaps:

//URL of your html import or script being executed.
var host = document.currentScript.ownerDocument.baseURI;
//splice and dice your host url to get protocol and base url
...
// let's say it is proto and base
var cssURL = proto + base + '/core/css/common.css'
// construct a style tag here with css imports.
// Since you have access to document-fragment coming with html import
// find template and inject this style tag inside it.
// Remember to inject it at top :)

Relative paths in custom component library

1 Answers1

Linked