polymer 3.0 uncaught reference error on paper drop-down click

Question

after importing these:

import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/paper-item/paper-item.js';

The dropdown does not produce an error when left alone but when clicked on (will repeat on multiple clicks) it will produce it.

Uncaught ReferenceError: KeyframeEffect is not defined
    at HTMLElement.configure (fade-in-animation.js:32)
    at HTMLElement._configureAnimations (neon-animation-runner-behavior.js:42)
    at HTMLElement.playAnimation (neon-animation-runner-behavior.js:122)
    at HTMLElement._renderOpened (iron-dropdown.js:200)
    at HTMLElement.__openedChanged (iron-overlay-behavior.js:608)
    at HTMLElement.nextAnimationFrame (iron-overlay-behavior.js:634)

Here is the code I am trying to get working:

<paper-dropdown-menu label="Dinosaurs">
  <paper-listbox slot="dropdown-content" selected="1">
    <paper-item>allosaurus</paper-item>
    <paper-item>brontosaurus</paper-item>
    <paper-item>carcharodontosaurus</paper-item>
    <paper-item>diplodocus</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

I have tried importing neon-animations.js, neon-animation.js and neon-animated-behavior.js. Looking at similar issues from other questions their solutions are to import web-animations into their html file but my code is in a js file so that would not work.

as a note I am not using bower or meteor.

Answer 1

You need to install the neon-animation element. Do this:

npm install --save @polymer/neon-animation

This will add the neon-animation dependency in your package.json and install it as well. Add the web-animations-js polyfill:

npm install --save web-animations-js

Once you are done installing these two. In the view which is responsible for the dropdown. Add the following code:

 import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';

you will have to use the mixinbehavior so add this as an import:

 import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';

Now say the name of the class is MyView1 where you are rendering this dropdown do this:

class MyView1 extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {

Now we need to add the polyfill web-animations-js to the index.html just after the web-components-loader:

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="node_modules/web-animations-js/web-animations-next.min.js"></script>

This will definitely work!

Answer 2

The Web Animations polyfill resolves the error you're seeing. Install it from npm:

npm i -S web-animations-js

Then, import it before using the paper-dropdown-menu, like this:

Firefox:

import 'web-animations-js/web-animations-next-lite.min.js';

demo 1

Chrome

<script src="./node_modules/web-animations-js/web-animations-next-lite.min.js"></script>

Note: Unfortunately in Chrome, the web-animations-next-lite.min.js file must be imported with a <script> tag (e.g., in index.html). This works in both Firefox and Chrome.

demo 2

Answer 3

in package.json "dependencies"

   "web-animations-js": "^2.3.1" 

in polymer.json "extraDependencies"

   "node_modules/web-animations-js/*.js"

in index.html AFTER webcomponents-loader script

   <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
   <script src="node_modules/web-animations-js/web-animations-next.min.js"></script>

importing any of the web-animation-js polyfill versions as javascript modules directly in my element and building with Polymer CLI produced the topic error. Loading the web-animations-next.min.js polyfill version synchronously in index.html after webcomponents loader script fixed error for me

Answer 4

Neon-animations are oficially deprecated, anyhow you can still download from https://www.npmjs.com/package/@polymer/neon-animation

To import'em in your polymer3 project from npm:

npm install --save @polymer/neon-animation

Answer 5

With regards to the previous answer by MKant, if you have an ASP.net site, you will need to add the last two script tags for the polyfills into your cshtml file or whichever file is calling your Polymer element. If you add them into your module template code, it will not work.