Polymer: Upgrading to Polymer 2, now no elements are showing on page despite being loaded.

[esd100]

My website using Polymer 1 was nearly complete and working wonderfully.

Thought I would upgrade to Polymer 2 and after installing Polymer 2, deleting bower and upgrading, now none of the elements are displaying. Some of the elements are still working, but none of the elements are being displayed on the screen.

I'm at my wits end and have been trying to figure out what is wrong for >6 hours. I've checked everything including Bower, Manifest, index in my project files, and elements, sources, console, network in the developer console.

The network shows the files are retrieved and loaded. The source files are there. The console shows no clear errors. The project files seem to be correct.

I even loaded a polymer paper-dialog demo file from my served up polymer project and it didn't work.

But when I download the PSK2 and served it up, it worked fine. So there is something wrong with my project but I can't find what's wrong!

Please help! I don't know what is causing the problem. I will share my repo with you.

[jsilvermist]

What happens if you run polymer lint on your project?

[esd100]

@jsilvermist Nothing major. It actually says there is 1 error, but doesn't actually list what it is.

I'm not sure how to find out what that error is though.

[esd100]

I have no idea why the elements aren't displaying but are present and functional. It's driving me bonkers.

[jsilvermist]

Do you have any link to check out?

[esd100]

Not sure what you mean by link to check out. I'm really an amateur. I shared the repo with you via collaborator link.

The master branch works. But the Polymer2 branch is the one that is caput.

[jsilvermist]

You can't pull in elements for 2.0 with bower like that yet, all the grouped *-elements packages still resolve to 1.0 elements, you need to pull in each element you use separately at ^2.0.0 for polymer 2.0 compatible elements.

Specifically you can see in the Chrome console that app-route is failing due to being version 1.0.1.

[esd100]

really? what a drag! okay, well, I'll get to work on that. Hopefully that fixes it.

But shouldn't polymer 2 still work with polymer 1 elements? I thought they were trying to "ease" the transition.

[jsilvermist]

Yea some of them have already been ported to use the newest version, but no new releases have been tagged yet unfortunately.

As for working with polymer 1 elements, the new 2.0.0 elements are (I believe?) all hybrid elements, so they should work with both polymer 1 and 2.

[esd100]

ahh...maybe I should just not even try to spend a lot of time on this polymer 2 thing then.

[esd100]

Ah, So wait, how does that translate to compatibility.

2.0 elements can work with polymer 1
1.0 elements cannot work with polymer 2

Is that right?

[jsilvermist]

Well there's the Polymer 1 element's you're used to, new Polymer 2 elements using the es6 class syntax, and then hybrid elements, which use the new changes to the html and dom-module like slot instead of content, and a few other things, but still use the legacy polymer 1 style Polymer({...}) call.

You can find more info here: https://www.polymer-project.org/2.0/docs/devguide/hybrid-elements

[esd100]

So, I guess I can't use the platinum-https-redirect anymore in the polymer 2 branch because they haven't touched that in ages (Mar 16, 2016 was the last release)

[esd100]

Yeah, I've been meaning to read that document for awhile. I just haven't been able to justify taking the time to work through all this crud.

[jsilvermist]

Looking at platinum-https-redirect (see below link) it doesn't seem like it has anything that would cause it to not work on Polymer 2, since it's already basically a hybrid element.

https://github.com/PolymerElements/platinum-https-redirect/blob/master/platinum-https-redirect.html

[esd100]

oh, cool. Yeah, I guess you have to go through and check each one to make sure that it fits the bill

[esd100]

There's probably no hope for the google-chart element though. I seriously doubt that one would pass muster.

[esd100]

Fudge! Why is paper-menu being neglected! Have to redesign the whole page now!

[jsilvermist]

Just use paper-listbox, it's a suitable replacement in most cases.

[esd100]

Well, apparently, it's not so simple. Especially if you have paper-submenu.

https://github.com/PolymerElements/paper-menu/issues/110
https://github.com/PolymerElements/paper-menu/pull/113

[esd100]

Well, fixing my bower.json helped to put some elements on the page, but the site formatting is now all haywire and some of the elements are completely shot!

Specifically, I changed my bower.json from something that looked like this:

{
  "name": "nuclear-medicine-log",
  "authors": [
    "Eric Diaz"
  ],
  "private": true,
  "dependencies": {
    "polymer": "Polymer/polymer#^2",
    "app-elements": "PolymerElements/app-elements#1 - 2",
    "iron-elements": "PolymerElements/iron-elements#1 - 2",
    "paper-elements": "PolymerElements/paper-elements#1 - 2",
    "neon-elements": "PolymerElements/neon-elements#1 - 2",
    "platinum-elements": "PolymerElements/platinum-elements#1 - 2",
    "google-web-components": "GoogleWebComponents/google-web-components#1 - 2",
    "vaadin-core-elements": "vaadin-core-elements#^1.0.0",
    "polymerfire": "firebase/polymerfire#^2",
    "bwt-datatable": "^1.0.11",
    "pdf-element": "^1.0.14",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
  },
  "devDependencies": {
    "web-component-tester": "^4.0.0"
  },
  "resolutions": {
    "polymer": "^2",
    "polymerfire": "^2",
    "webcomponentsjs": "^v1.0.0",
    "app-storage": "1 - 2",
    "paper-styles": "^1.1.0",
    "firebase": "^3.0"
  }
}

to something that looks like this:

{
  "name": "nuclear-medicine-log",
  "authors": [
    "Eric Diaz"
  ],
  "private": true,
  "dependencies": {
    "polymer": "Polymer/polymer#^2",
    "polymerfire": "firebase/polymerfire#^2",
    "app-layout": "PolymerElements/app-layout#^2.0",
    "app-storage": "PolymerElements/app-storage#^2.0",
    "app-route": "PolymerElements/app-route#^2.0",
    "paper-dialog": "PolymerElements/paper-dialog#^2.0",
    "paper-menu": "YvanDaSilva/paper-menu#2.0-preview",
    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0",
    "paper-material": "PolymerElements/paper-material#^2.0",
    "paper-card": "PolymerElements/paper-card#^2.0",
    "paper-listbox": "PolymerElements/paper-listbox#^2.0",
    "paper-item": "PolymerElements/paper-item#^2.0",
    "paper-button": "PolymerElements/paper-button#^2.0",
    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0",
    "paper-tabs": "PolymerElements/paper-tabs#^2.0",
    "paper-toast": "PolymerElements/paper-toast#^2.0",
    "paper-styles": "PolymerElements/paper-styles#^2.0",
    "neon-animation": "PolymerElements/neon-animation#^2.0",
    "iron-ajax": "PolymerElements/iron-ajax#^2.0",
    "iron-behaviors": "PolymerElements/iron-behaviors#^2.0",
    "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^2.0",
    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.0",
    "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^2.0",
    "iron-localstorage": "PolymerElements/iron-localstorage#^2.0",
    "iron-location": "PolymerElements/iron-location#^2.0",
    "iron-input": "PolymerElements/iron-input#^2.0",
    "iron-form": "PolymerElements/iron-form#2.0-preview",
    "iron-selector": "PolymerElements/iron-selector#^2.0",
    "iron-collapse": "PolymerElements/iron-collapse#^2.0",
    "iron-image": "PolymerElements/iron-image#^2.0",
    "iron-icon": "PolymerElements/iron-icon#^2.0",
    "iron-icons": "PolymerElements/iron-icons#^2.0",
    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0",
    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0",
    "iron-media-query": "PolymerElements/iron-media-query#^2.0",
    "iron-component-page": "PolymerElements/iron-component-page#^2.0",
    "iron-pages": "PolymerElements/iron-pages#^2.0",
    "google-chart": "GoogleWebComponents/google-chart#^1.1.2",
    "platinum-https-redirect": "PolymerElements/platinum-https-redirect#^1.0.2",
    "vaadin-core-elements": "vaadin-core-elements#^1.6.0",
    "bwt-datatable": "^1.0.11",
    "pdf-element": "^1.0.14",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
  },
  "devDependencies": {
    "web-component-tester": "^4.0.0"
  },
  "resolutions": {
    "paper-material": "^2.0",
    "polymer": "^2",
    "paper-icon-button": "^2.0",
    "paper-card": "^2.0",
    "paper-button": "^2.0",
    "paper-item": "^2.0",
    "paper-styles": "^2.0",
    "iron-form": "2.0-preview",
    "iron-ajax": "^2.0",
    "neon-animation": "^2.0",
    "iron-input": "^2.0",
    "iron-image": "^2.0",
    "iron-behaviors": "^2.0",
    "iron-flex-layout": "^2.0",
    "iron-a11y-keys-behavior": "^2.0",
    "iron-resizable-behavior": "^2.0",
    "iron-menu-behavior": "^2.0",
    "iron-collapse": "^2.0",
    "iron-icon": "^2.0",
    "iron-iconset-svg": "^2.0",
    "iron-selector": "^2.0",
    "iron-media-query": "^2.0",
    "webcomponentsjs": "^1.0.0"
  }
}

Apparently, loading the element packages was doing some crazy stuff and making nothing work.

[esd100]

Apparently neon-animation is now broken and worst of all deprecated too! Can someone explain to me how getting rid of behaviors was thought to be a good idea?

I remember watching the original videos on Polymer and it was advertised as being a platform that would eliminate boilerplate and help amateurs, who just know basic HTML to create websites.

It seems that with the latest generation of Polymer, while some areas have improved, many areas have regressed if measured by the original philosophy of the project.(https://youtu.be/VMVj_jR75vE?t=14m36s and https://youtu.be/DH1vTVkqCDQ?t=12m31s).

Now it seems to build a website, even with Polymer, just ends up being back the way it used to be, end up requiring a lot of intricate knowledge and writing a lot of complex code (heavy lifting) to accomplish things that use to be easy in Polymer 1. For example, I have no idea how to animate stuff in css or web animations. I don't want to have to learn a whole new technology to get elements that have that behavior built in, aka., neon-animation. This is a major step backward.

[kevinpschaaf]

@esd100 Sorry to hear your upgrade experience has not met expectations. We've put a lot of work in to make this breaking change as smooth as possible, insomuch as it's still a breaking change.

To summarize, updating to Polymer 2 does require that all element dependencies be updated to Polymer 2.0.

It sounds like you've hit a few dependencies that haven't been ported to Polymer 2.0 yet. We're maintaining a list of hybrid-supported elements here: https://www.polymer-project.org/2.0/docs/about_20#elements. I'd recommend cross-referencing your dependencies against this list and eliminating usage of elements not on this list, or else fork the element and do the minimal work to adhere to the Polymer 2.0 hybrid rules (which are typically very minimal) -- and PR's for this kind of work back to the elements are always appreciated.

[esd100]

It's just sad that something that once was once easy to use, is now difficult to use and doesn't jive with it's original philosophy. It doesn't seem like progress to me.