Home Start Get started Quick tour of Polymer Install Polymer 2.x Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview About this release What's new in 2.0 Upgrade guide Hybrid elements Release notes Custom elements Custom element concepts Define an element Declare properties 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 Tools Tools overview Polymer CLI Document your elements Test your elements Web services polymer.json specification Node support Resources Glossary API Reference API Reference Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Deploy Build for production Serve your app The PRPL pattern Case study Shop News Blog Community Feature overview
About this release
What's new in 2.0 Upgrade guide Hybrid elements Release notes
Custom elements
Custom element concepts Define an element Declare properties
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
Tools
Tools overview Polymer CLI Document your elements Test your elements Web services polymer.json specification Node support
Resources
Glossary
API Reference
API Reference Global settings

Polymer 2.x uses EcmaScript 2015 (commonly known as ES6). The following browsers support all of the ES6 features required by Polymer:

  • Chrome or Chromium version 49 or later.
  • Opera 36 or later.
  • Safari or Mobile Safari 10 or later.
  • Edge 15.15063 or later.
  • Firefox 51 or later.

For other browsers, you should compile your application to ES5.

Information on multiple builds and differential serving is available in the documentation on building for production.

Polymer 2.x and native 2.x class-style elements are written using the next generation of the JavaScript standard, EcmaScript 2015 (more commonly known as ES6). ES6 is required by the native custom element specification. (All browsers that implement native custom elements also support ES6.)

The Polymer CLI and polymer-build library support compiling ES6 to ES5 at build time. In addition, the polymer serve and polymer test commands compile at runtime when required by the browser.

Device emulation may cause errors. When using DevTools device emulation in Chrome, polymer serve will serve compiled code when emulating iOS devices, and uncompiled code when emulating Android devices. When switching between devices, the browser may end up with both compiled and uncompiled code in its cache, resulting in errors. To avoid this problem, run polymer serve with the --compile never option when testing with device emulation.

For best performance, you should serve ES6 code to browsers that support it, and only serve ES5 code to browsers that don't support ES6.

If you need to statically host your code and serve a single version to all browsers, compile to ES5.

When you use the Polymer CLI to compile your app, the CLI automatically compiles the correct files and injects custom-elements-es5-adapter.js, a lightweight polyfill that lets compiled ES5 work on browsers that support native custom elements.

If you're putting together a custom build:

  • Polymer requires all ES6 features except modules. (If you're using Babel, you can use babel-preset-es2015 with the modules option set to false.)
  • You must compile all your elements, the Polymer library, and any third-party elements you're using, but not the polyfills.
  • If you're serving compiled code to browsers that support native custom elements, inject the custom-elements-es5-adapter.js script at build time. The polymer-build library provides a addCustomElementsEs5Adapter method to inject the script. If that method doesn't work with your build system, see the webcomponentsjs README for details on using the script.