Manage dependencies and HTML imports

Use Bower to manage dependencies

Dependencies are stored in the bower_components directory. You should never manually alter the
contents of this directory.

Use the Bower CLI to manage dependencies.

To download a dependency to bower_components/ (the --save flag saves the new
dependency to bower.json):

bower install --save PolymerElements/iron-ajax

To remove the dependency from bower_components and bower.json:

bower uninstall PolymerElements/iron-ajax

Import dependencies as relative URLs

When importing dependencies inside your element, you should always use a relative URL as if the
dependency is a sibling of your project.

<!-- from a top-level 'some-element.html' --><linkrel="import"href="../polymer/polymer.html"><linkrel="import"href="../paper-elements/paper-button.html">

Why use relative URLs?

Suppose that you ran Polymer CLI to generate an element project. Your element is named my-el.
You look inside my-el.html and see that Polymer has been imported like so:

<link rel="import" href="../polymer/polymer.html">

This path doesn't make sense. Relative to my-el.html, Polymer is actually located at
bower_components/polymer/polymer.html. Whereas the HTML import above is referencing a location
outside of your element project. What's going on?

This works well on the application-level. All elements are siblings, so they can all reliably
import each other using relative paths like ../polymer/polymer.html. This is why Polymer CLI
uses relative paths when initializing your element project.

However, one problem with this approach is that this structure does not actually match the layout
in your element project. Your element project is actually laid out like so:

bower_components/
polymer/
polymer.html
my-el.html

Polymer CLI handles this by remapping paths. When you run polymer serve, all elements in
bower_components are remapped to appear to be in sibling directories relative to my-el. The
current element is served from the made-up path of /components/bower name,
where bower name is the name field from your element project's
bower.json file.