Absolute paths not allowed on Dart WebComponent

Question

My little Dart/Polymer sample works nice so far. (GitHub)

Here is the yaml file I use:

name: PolymerHelloWorld
environment:
  sdk: any
dependencies:
  browser: any
  polymer: any
  shadow_dom: any
  mdv: any

transformers:
-  polymer:
    entry_points:
    - web/index.html
    - web/hello-world/hello-world.html
    - web/stopwatch/stopwatch.html

"pub build" produces: (Live again under GH)

From my understanding now I have 2 webcomponents: hello-world and stopwatch

I made a second project, completely independent form PolymerHelloWorld. Here is the index.html:

I get this error message

pub build
Building PolymerSecondWorld...
[Error from polymer (Linter) on PolymerSecondWorld|web/index.html]:
web/index.html:4:5: absolute paths not allowed: "https://rawgithub.com/MikeMitterer/DART-Sample-PolymerHelloWorld/master/build/hello-world/hello-world.html"

Isn't this the idea of webcomponents? Do I miss something?

[Update]
I added DART-Sample-PolymerElementConsumer to my GH-Repo. It includes the whole polymer stuff... This sample is not a Dart-Sample. It uses polymer to import the component. At least - it tries to...

Here is the HTML it try to run:
https://rawgithub.com/MikeMitterer/DART-Sample-PolymerElementConsumer/master/web/index.html

Codeview:
https://raw.github.com/MikeMitterer/DART-Sample-PolymerElementConsumer/master/web/index.html

The HTML-Page shows no error message - nothing. Just the headline but nothing from the webcomponent.

Answer 1

If you want to import Polymer elements they have to be in a Dart package (e.g pub.dartlang.org).
You add the package to you pubspec.yaml to import the package into your project and
then you can import the elements/components from the packages directory.

Polymer is also very delicate about the import paths within a Dart project
and something like you tried definitively won't work
(this could work in JavaScript though) but this would require to execute code (included within the loaded component) loaded at runtime which Dart doesn't support yet. All code has to be available at compile time.

Some discussions about this topic:

• trouble importing components using href="package:..."
• should HTML Imports support package: scheme?
• How can I import a custom element in both HTML and Dart? (workaround included)
• improve canonicalization issues with html-imports involving packages

EDIT

I looked at your code and tried to understand your comment and extended my answer accordingly.

To be able to import components from a package the components have to be in the lib directory of the package you want to import. The web page using (importing) elements has to be a Dart project (package) which imports the component package in 'pubspec.yaml'. For the web application (index.html, ...) web is the correct directory within the package.