Polymer 0.8 "Uncaught ReferenceError: Polymer is not defined"

Question

Recently I made the decision test out Polymer 0.8 rather than just read about it, however I've come across an error: "Uncaught ReferenceError: Polymer is not defined".

I have a feeling it's something really simple that I've missed I can't seem to figure it out.

Below is my code which I've literally copied and pasted from the feature overview document:

<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

<dom-module id="element-name">
  <style>
    /* CSS rules for your element */
  </style>
  <template>
    <!-- local DOM for your element -->

    <div>{{greeting}}</div> <!-- data bindings in local DOM -->
  </template>
</dom-module>

<script>
  // element registration
  Polymer({
    is: "element-name",

    // add properties and methods on the element's prototype

    properties: {
      // declare properties for the element's public API
      greeting: {
        type: String,
        value: "Hello!"
      }
    }
  });
</script>

<element-name></element-name>

Thanks in advance.

Answer 1

webcomponents-lite.min.js is the Polyfill for Shadow DOM and html Imports you should add this to you main.html page and not in your custom component.

Instead you should add the Polymer Library where you have added the Polyfill.

Below is an example code:

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

<dom-module id="element-name">
  <style>
    /* CSS rules for your element */
  </style>
  <template>
    <!-- local DOM for your element -->