Relative URLs in Web Components

Consider a packaged (possibly third-party) web component you would like to use on your site. Using your favorite package manager, you install the component into a dependencies folder. Ideally you can now consume it just by `<link rel=import>`ing the component into your pages, without having to make any changes to the third-party code.

Unfortunately this is not true for components that use relative URLs to refer to resources that are packaged and installed along with the component. To help illustrate this, I’ve created a simple example component that uses CSS to apply a green background image. Code: https://github.com/mathiasbynens/relative-urls-in-web-components/tree/gh-pages/packaged-web-component

Here’s an example (included in the component’s package) showing the component in action: https://mathiasbynens.github.io/relative-urls-in-web-components/packaged-web-component/example.html It loads [the `main.css` file](https://mathiasbynens.github.io/relative-urls-in-web-components/packaged-web-component/main.css) which in turn fetches [`background.png`](https://mathiasbynens.github.io/relative-urls-in-web-components/packaged-web-component/background.png). So far, everything works fine.

But if the component gets `<link rel=import>`ed from any other directory (as in the above scenario), the relative reference to `main.css` won’t normalize to the expected URL. Example: https://mathiasbynens.github.io/relative-urls-in-web-components/example.html (Note the lack of green background.)

Can this be fixed, somehow? Doing so would make it possible to use third-party web components without having to edit them just to make the URLs match your setup.

Possible solutions (just brainstorming here):

* Make relative URLs within a `<template>` within an HTML-Import’ed document resolve using the imported document’s URL (rather than the parent document’s URL) as the base URL.
* Make `<link>` not inert in `<template>`.

Thoughts?

Received on Thursday, 2 October 2014 13:00:08 UTC