Polymer 2.0 Introduces Breaking Changes But the Migration Has Been Smoothed

| by Abel Avram Follow 9 Followers on Dec 23, 2016. Estimated reading time: 1 minute |

Polymer 2.0 replaces Custom Elements API v0 with v1, deprecates Polymer.dom, uses Shadow DOM instead, but the migration path is not so steep as these changes suggest, because they have introduced a compatibility layer that enables code created with Polymer 1.7+ to run under 2.0

Polymer 1.+ was built on Custom Elements API v0, which has been deprecated, a custom element being initialized with document.registerElement(). Polymer 2.0 uses instead customElements.define(), which is how a new element is created under the Custom Elements API v1. This latest version of the API is to be supported by all the major browsers soon. Chrome 54+ has already implemented it, as Safari TP has it, while Edge and Firefox have started working on it. (More details on the current implementation status can be found here.) In the meantime, this polyfill can be used to add support for custom elements to all browsers.

Another important change is the deprecation of the Polymer.dom, being replaced with Shadow DOM v1 which has been implemented by browsers or it is under development. The shady DOM has been extracted out of Polymer and provided as a polyfill.

Regarding the data system, Polymer 2.0 introduces a number of enhancements: no more dirty checking for objects and arrays, simpler handling of arrays, data change notifications are batched, and others.

To avoid the damage that could be done by breaking changes, Google has introduced a compatibility layer that allows custom elements created with Polymer 1.7+ to work under 2.0. Developers will only need to “adapt existing code to be compliant with the shadow DOM v1 API related to content distribution and styling, as well as minor breaking changes introduced due to changes in the custom elements v1 API.” Polymer also introduces hybrid elements that makes them compatible with Polymer 1.x. At some point, a tool will be made available for automatic conversion of custom elements created with Polymer 1.x to 2.0.

Custom elements are defined in Polymer 2.0 using the class syntax available in ES6. The factory method existing in Polymer 1.x can be used through the compatibility layer.

Polymer 2.0 Preview is available to developers but it is under heavy development and it is not recommended for production yet. Polymer 2.0 GA will be released some time during Q1/2017.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread


Educational Content

Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you