W3C home > Mailing lists > Public > public-webapps@w3.org > October to December 2014

Relative URLs in Web Components

From: Mathias Bynens <mathias@qiwi.be>
Date: Thu, 2 Oct 2014 14:59:33 +0200
Message-Id: <1BAE726A-D25B-407E-B74A-11426F2AE0EC@qiwi.be>
Cc: Addy Osmani <addyo@google.com>
To: public-webapps@w3.org
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>`.

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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 18:14:31 UTC