Week 2 | Including Polymer

polymer 1.0
Mon Sep 05 2016

Well duh, to use Polymer.js we have to include it on our page somehow.

Polymer.js uses the new HTML Import specification to include other elements but itself as well (mind blow).

We first need the webcomponents-lite-min.js library to enable the HTML Import functionality in older browsers and then we can import Polymer with the rel=”import” link tag.

<!DOCTYPE html>

<html>
    <head>
        <script src="components/webcomponents-lite.min.js"></script>
        <link rel="import" href="components/polymer/polymer.html" />
    </head>
    <body>
      
    </body>
</html>

Live example

Or we can use Polygit as a Polymer CDN. However, this is not a recommended way for production websites as you cannot vulcanize or optimize the build/load process.

<!DOCTYPE html>

<html>
    <head>
      <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel="import" href="https://polygit.org/components/polymer/polymer.html" />
    </head>
    <body>
    </body>
</html>

Live example

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!