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

Polymer 3.x works in the latest two versions of all major browsers: Safari 10+, IE 11+, and the evergreen Chrome, Firefox, and Edge.

The Polymer library is a lightweight sugaring layer on top of the Web Components APIs. Some features used by Polymer are not (yet) supported natively in all browsers.

  • For broad web components support, Polymer uses the polyfills from webcomponents.org. They're lightweight, work well, and provide the feature support Polymer requires.

  • Polymer uses ES6 language features. For browsers that don't support them, Polymer apps need to be compiled to ES5.

  • Polymer uses ES6 modules for packaging. These can be bundled out or transformed to AMD modules for browsers that don't support the required features, which include the import statement, the dynamic import() operator, and the import.meta property.

  • Polymer modules also use Node-style module resolution allowing you to import modules by package name. These specifiers always need to be transformed to paths before being served to browsers.

The following support matrix summarizes the polyfills and transforms required for each browser.

Browser & version Compile? Polyfills? Transform modules? Transform specifiers?
Chrome 66 No No No Yes
Safari 11.1+ No No No Yes
Safari 10+ No Yes Yes Yes
Firefox 60 No Yes No Yes
Firefox 59 No Yes Yes Yes
Edge 17 No Yes No Yes
Edge 16 No Yes Yes Yes
IE 11 Yes Yes Yes Yes
Chrome 41 (Google web crawler) Yes Yes Yes Yes

See the documentation on polyfills and ES6 & modules for more information.