Using custom polymer elements in with bower

0
votes

I've got a custom Polymer element polymer install element call it <x-custom-element> once created i'm unable to polymer serve until I change the links to reference the bower components in the elements folder.

When I publish the element to my git repository I need to change the references in the elements <links rel="import" href="bower_components/"> tohref="../` or what ever the link is to use the bower_components folder form the directory that install the element.

For example to be able to serve the file via polymer serve, with this file structure

  • bower.json
  • bower_components/
  • test/
  • temo/
  • x-custom-element.html

The links in x-custom-element.html need to refer to /bower_components/*

But to be able to be usable as a bower import I must change the references to ../*

Is there anyway to remedy this process? How should you approach this problem.

Create a script to change all the link back and forth? What other options do I have?

1
polymerbowerpolymer-1.0

1 Answers

1
votes

Your example project directory is missing index.html in the root. This should be automatically generated by polymer-cli (i.e., polymer init element), and it should look like this:

<!doctype html>

<html>
  <head>
    <title>x-foo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../iron-component-page/iron-component-page.html">
  </head>
  <body>
    <iron-component-page src="x-foo.html"></iron-component-page>
  </body>
</html>

I didn't have any problems viewing the site with polymer serve -o after generating the element project with polymer init element (polymer-cli v0.16.0, polyserve v0.13.0, macOS Sierra 10.12).

enter image description here