Polymer 1.x site is not working on Chrome v80

[adesh70695]

Description

Steps to Reproduce

Login to internal application

Expected Results

Proper UI loading and rendering

Actual Results

Broken UI and polymer components not working

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Versions

• Polymer: v1.9.0
• webcomponents: v0.7.24

As per the site
https://www.polymer-project.org/blog/2018-10-02-webcomponents-v0-deprecations
I have added the following line to load the polyfills

<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

But adding or removing it does not have any effect on the UI

[arthurevans]

Hi, thanks for the report. Does that script tag occur before any of the Polymer elements are loaded? Are you seeing any errors in the console?

[adesh70695]

application is loading but components like px-icon, px-modal are not working after including them all in some file "polymer-includes.html" and then importing this to index.html. Any suggestions?

[arthurevans]

@adesh70695 sorry for the slow response. It's hard to know what could be going wrong from that description. If you can produce a minimal reproduction case for the issue, we might be able to help.

If your app is only on Chrome, you may be using the polyfills for the first time, so you may see some new issues. Probably the most common would be timing issues, if your elements rely on the timing of native shadow DOM. It's been a long time since I've worked with Polymer v1, but there are some notes about timing here: https://polymer-library.polymer-project.org/1.0/docs/devguide/registering-elements#initialization-order

One sanity check you might try is opening the app, opening DevTools, and checking whether Polymer library is loading:

Polymer.version
Polymer.telemetry.registrations

If you get an error on the first command, it suggests that the Polymer isn't loading at all--if it isn't, it's likely that the polyfills aren't getting loaded correctly, or aren't getting loaded before you import polymer-includes.html.

The second command should return an array that lists all of the registered custom elements. If your elements are there but not working right, that suggests timing issues. You could also be seeing issues with shady DOM (the shadow DOM polyfill/shim) but in that case you would usually see the elements, but the display would be messed up in some way.

I'd also suggest joining the Polymer Slack channel if you haven't already. There are a lot of folks on there who've dealt with the Chrome 80 transition.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.