Polymer Site

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:

• two-way data binding
• declarative event handling
• declarative inheritance
• property observation

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.
      <my-element></my-element>
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 »