Polymer Logo Home Guides Feature overview Try Polymer Install Polymer 3.x Tutorial: Build an element 1. Get set up 2. Add shadow DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties About this release What's new in 3.0 Upgrade guide Release notes Custom elements Custom element concepts Define an element Declare properties Working with legacy elements Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Browser support Overview Polyfills ES6 and modules Tools Tools overview Polymer CLI CLI commands Create an element project Create an application project Document your elements Test your elements polymer.json specification Node support Build apps Overview App templates Build for production Serve your app The PRPL pattern Service worker Reference Glossary Global settings API Reference index polymer-element.js Elements array-selector.js custom-style.js dom-bind.js dom-if.js dom-module.js dom-repeat.js Mixins dir-mixin.js disable-upgrade-mixin.js element-mixin.js gesture-event-listeners.js mutable-data.js properties-changed.js properties-mixin.js property-accessors.js property-effects.js strict-binding-parser.js template-stamp.js Utils array-splice.js async.js case-map.js debounce.js flattened-nodes-observer.js flush.js gestures.js html-tag.js mixin.js path.js render-status.js resolve-url.js settings.js style-gather.js telemetry.js templatize.js Legacy class.js legacy-data-mixin.js legacy-element-mixin.js mutable-data-behavior.js polymer-fn.js polymer.dom.js templatizer-behavior.js

The Polymer library is in maintenance mode. For new development, we recommend Lit.

Contents

You can get started with a Polymer application using one of several templates that incorporate the elements and patterns discussed here using the Polymer CLI.

To initialize a project from a template, ensure you have the Polymer CLI installed, cd into an empty project folder, and simply run the following command, which will prompt you to select from the currently available templates.

    $ polymer init

The polymer-3-element template gives you a starting point for building a reusable, publishable element. It includes a small demo page that displays your element, along with a simple example of how to use the element in markup.

The polymer-3-application template is the most basic starting point for any app built with Polymer. It starts with a single bare-bones custom element that can serve as the root of your application, from which you can build in any direction with maximum flexibility.

The polymer-3-starter-kit introduces the app-layout elements, and composes them in a common left-hand drawer arrangement with a toolbar. The template provides navigation between a series of views that load and are rendered in the main content area.

The template is also set up to use the PRPL pattern for efficient and progressive loading of the application, where views are loaded on-demand and will be pre-cached for offline and subsequent use.

The templates are starting points, and you are free to add web components discussed in the rest of the Build apps section according to the needs of your application, as well as from other sources such as the WebComponents.org.