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
---         


        

Answer 1

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 :)