Polymer Site

Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.

Installing Polymer

Installing with Bower
Bower adds a bower_components/ folder in the root of your project and fills it with Polymer and its dependencies.

  1. bower init
    run this command from the root of your project. This generates a basic bower.json
  2. bower install --save Polymer/polymer
    Bower adds a bower_components/ folder in the root of your project and fills it with Polymer and its dependencies.
  3. bower update
    This updates all packages in bower_components.
  4. update web.config
    This allows polymer to work with IIS Express
  5. bower install --save Polymer/core-elements
    Core Elements
  6. bower install --save Polymer/paper-elements
    Paper Elements

Get the Code »

Layout elements

The core-elements and paper-elements collections include a number of elements that can be used to structure your app’s layout.

  • core-header-panel
    A simple container with a header section and content section. The header can either stay in place or scroll with the content.
  • core-toolbar
    Can be used for an app bar or a toolbar on a smaller UI component, such as a card. The toolbar can serve as a container for controls, such as tabs and buttons.
  • core-drawer-panel
    A responsive container that combines a left- or right-side drawer panel for navigation or other options and a main content area.
  • core-scaffold
    A quick responsive app layout that includes a navigation drawer, main app bar and content area (implemented using a core-drawer-panel, core-header-panel and core-toolbar.) The core-scaffold element is a quick way to structure an app’s UI.

Learn more »

Polymer in 10 minutes

Polymer makes it simple to create web components, declaratively.
Custom elements are defined using our custom element, < polymer-element > , and can leverage Polymer’s special features.
These features reduce boilerplate and make it even easier to build complex, web component-based applications:

  1. Install Polymer
  2. Build a Polymer element

    Polymer provides extra goodies for creating declarative, souped-up custom elements. We call these “Polymer elements”. From the outside they look just like any other DOM element, but inside they’re filled with handy features like two-way data binding and other bits of Polymer magic. These features make it easy to build complex components with much less code.

      To create a new element:
      <polymer-element name="my-element" noscript>
    1. Load the Polymer core (polymer.html).
    2. Declare your custom element using <polymer-element>
    3. The name attribute is required and must contain a “-“. It specifies the name of the HTML tag you’ll instantiate in markup (in this case <my-element>).
    4. noscript attribute indicates that this is a simple element that doesn’t include any script. An element declared with noscript is registered automatically.
  3. Create an app

    create an index.html that imports your new element. Remember to include webcomponents.min.js to load polyfills for the native APIs.

    1. Load platform support before any code that touches the DOM.
      <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    2. Load the component using an HTML Import
      <link rel="import" href="elements/my-element.html">
    3. Declare the element by its tag.
  4. Using Polymer’s features: Polymer provides a number of sugaring APIs for authoring web components. API Reference
    • Add properties and methods
      When you’re creating a new element, you’ll often need to expose a public API so users can configure it. To define a public API, include a script tag that calls the Polymer(...) constructor. The Polymer(...) constructor is a convenience wrapper for document.registerElement, but also endows the element with special features like data binding and event mapping. The Polymer constructor takes as an argument an object that defines your element’s prototype.
    • Adding lifecycle methods
      Lifecycle callbacks are special methods you can define on your element which fire when the element goes through important transitions.
      When a custom element has been registered it calls its created() callback (if one has been defined). When Polymer finishes its initialization, the ready() method is called. The ready callback is a great place to do constructor-like initialization work.
    • Declarative data binding
      Data binding is a great way to quickly propagate changes in your element and reduce boilerplate code. You can bind properties in your component using the “double-mustache” syntax ({{}}). The {{}} is replaced by the value of the property referenced between the brackets.
    • Binding to markup
      You can use binding expressions in most HTML markup, except for tag names themselves.
      In the following example, we create a new property on our component named color whose value is bound to the value of the color style applied to the custom element.
      Bindings ensure that any time a property like color is changed, the new value will be propagated to all binding points.
    • Binding between components and built-in elements
      You can use bindings with built-in elements just like you would with Polymer elements. This is a great way to leverage existing APIs to build complex components. The following example demonstrates binding component properties to attributes of native input elements.
    • Publishing properties
      Published properties can be used to define an element’s “public API”. Polymer establishes two-way data binding for published properties and provides access to the property’s value using {{}}. Publish a property by listing it in the attributes attribute in your polymer-element. Properties declared this way are initially null. To provide a more appropriate default value, include the same property name directly in your prototype.
    • Automatic node finding
      The use of the id attribute has traditionally been discouraged as an anti-pattern because the document requires element IDs to be unique. Shadow DOM, on the other hand, is a self-contained document-like subtree; IDs in that subtree do not interact with IDs in other trees. This means the use of IDs in Shadow DOM is not only permissible, it’s actually encouraged. Each Polymer element generates a map of IDs to node references in the element’s template. This map is accessible as $ on the element and can be used to quickly select the node you wish to work with.

Learn more »