How does dart library/import mechanism work with WebComponents?

Question

You use part/part of in dart code to create libraries, how does the HTML templates in WebComponents fit into this? How do I make the HTML templates part of the library? Also when i use <link rel> to import the relevant component, what do I reference?

I have this problem where I wrote a web componet A, so I have A.dart and A.html, I would like to package A into a library. If I reference A.html using a link rel anywhere the compiler will not package it into the library and instead treat it as a separate file.

Is each dart application a separate package or can I create multiple packages inside of a dart application project in dart-editor? The reason why I ask is because I want to separate my application into components

/web
  /components
    A.html
    A.dart
  index.html
  index.dart

where everything under /components get put into a package that can be imported by index.html

Pixel Elephant Pixel Elephant · Accepted Answer · 2013-05-31T14:10:36

There is a distinction between a Dart library and a Dart package. A library contains only Dart code, while a package contains Dart libraries as well as their relevant assets. library foo; part of foo; are only relevant in a code context. So long as your assets are in the same package directory as your Dart code (i.e. the directory that has pubspec.yaml at the top level) they are part of the same package.

You can import assets from packages by specifying the package path:

<link rel="import" href="package:foo/a.html">

Where foo is a package in your web/packages directory.

How does dart library/import mechanism work with WebComponents?

1 Answers