Polymer Web Components in ember-cli

Some quick notes on getting the Polymer Web Components up and running in an ember-cli project (>= 0.4.1).

I've also put together a gist that covers the code changes necessary in each file to get the components installed.

Web Components represent the future of web development (and an eventual drop-in replacement/addition for Ember components post the 2.0 release and HTMLBars). Plus, there are some incredibly cool components to help you build very rich web-apps using Google's new material design language.

First step is to add the individual bower components:

bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

Next, you'll want to add some additional npm packages so you can make the individual Polymer elements available to your app.

npm install --save-dev broccoli-static-compiler
npm install --save-dev broccoli-merge-trees

You'll use these two projects to merge in the polymer.js/polymer.html files necessary for the individual Polymer elements (or using Polymer to write your own Web Components to catch a taste of what Ember components will eventually become).

You'll also want to explicitly add the platform.js file to your app's build tree in your Brocfile as it provides the Web Component/Shadow DOM polyfills necessary to make all this work in Safari, Firefox, and IE (the latest Chrome releases now offer native support for all Polymer features, so no polyfills are necessary there).

var polymer = pickFiles('bower_components/', {
  srcDir: '',
  files: [
    'polymer/polymer.js',
    'polymer/polymer.html',
    'platform/platform.js'
  ],
  destDir: '/assets'
});

Next up is adding the broccoli-vulcanize package:

npm install --save-dev broccoli-vulcanize

The vulcanize tool lets you compile individual Polymer components into a single <link> import, rather than needing to explicitly import each component you need. This cuts potentially dozens of network requests down to just one (two if you decide to compile the JS from the vulcanized files into a separate include).

You'll need to create a new html file in your app folder (I tend to call it elements.html). In there, you'll need to add all the individual Polymer element <link rel="import"> entries for the individual components you plan on using. Fortunately, the Polymer bower projects already ship with pages that let you quickly add most of the core and paper elements without having to explicitly add each one (though the font, icon, and transition elements need to be included manually if you want them). You need to specify the relative location of the files in the bower_components folder:

<link rel="import" href="../bower_components/core-elements/core-elements.html">
<link rel="import" href="../bower_components/paper-elements/paper-elements.html">

You can add your own custom Web Components to this file (or import them from another file with a <link> statement.

Now, add a vulcanize step to your Brocfile:

var polymerVulcanize = vulcanize('app', {
  input: 'elements.html',
  output: 'assets/vulcanized.html',
  csp: true,
  inline: true,
  strip: false,
  excludes: {
    imports: ["(^data:)|(^http[s]?:)|(^\/)"],
    scripts: ["(^data:)|(^http[s]?:)|(^\/)"],
    styles: ["(^data:)|(^http[s]?:)|(^\/)"]
  }
});

Add your new resources into your app's build tree:

module.exports = mergeTrees([
  polymerVulcanize,
  polymer,
  app.toTree()
]);

Now, you just need to add platform.js and your new vulcanized.html files to your app's index.html (before any other scripts are loaded):

<script src="assets/platform/platform.js"></script>
<link rel="import" href="assets/vulcanized.html">