Upgrade Px element to Polymer 2.0

1-steps.md

Step-by-step upgrade from Polymer 1.6 -> 2.0

Before you start

1. Install Polymer/polymer#2.0-preview bower package and webcomponents/webcomponentsjs#v1 bower package

$ bower install --save Polymer/polymer#2.0-preview
$ bower install --save webcomponents/webcomponentsjs#v1

You'll likely get resolution errors from bower because your other components in bower.json want different version of the Polymer and webcomponents libraries.

2. Remove all dependencies and extra markup in index.html demo file except for the component you're working on (to avoid Polymer 1.X conflicts)
3. Move existing *.html files to a 1.x/ folder for reference during development
4. Create a new px-[ELEMENT].es6.js and start a base Polymer Element constructor. Copy your code from your Polymer 1.x factory into the right places.

Converting your HTML template

Rewrite all <template is="dom-if"> (etc.) tags in your dom-module to remove all is= attributes

See the note from the Polymer 2.0 upgrade guide about how to wrap.

Replace all <content> tags with <slot> tags.

Note that you'll need to also convert how they are called in your component's JavaScript and how they are distributed if they have names or are passed into deeper components.

Converting your JavaScript

2-gotchas.md

Things to watch for

this.$$()

The Polymer this.$$() convenience search method is gone. This method was used in 1.x to query the shadow root of this. Use this.shadowRoot.querySelector() instead.

// 1.x
this.$$.('some-tag-name');

// 2.x
this.shadowRoot.querySelector('some-tag-name');

Polymer.dom(this).querySelector()

Replace with this.querySelector() instead.

More to add

• this.$.id
• <dom-if if=""><template></template></dom-if> <-- thinks docs are wrong?

3-reading.md

More reading

• Discourage using ready callback 2.x