Crashes when clicked: KeyframeEffect is not defined

floribon commented 5 years ago

I'm getting this error even when using the exact same HTML as given in the demo:

<html>
  <head>
    <script type="module">
      import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
      import '@polymer/paper-item/paper-item.js';
      import '@polymer/paper-listbox/paper-listbox.js';
    </script>
  </head>
  <body>
    <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>
  </body>
</html>

When I click on the dropdown:

fade-in-animation.js:32 Uncaught ReferenceError: KeyframeEffect is not defined

Using Polymer 3, in particular:

@polymer/polymer: ^3.1.0 @polymer/paper-dropdown-menu: 3.0.1

Is there any workaround to have this working? Where is KeyframeEffect defined? Thanks

Note that I don't need any specific transition, just the default look and feel of paper-dropdown.

Browsers Affected

[x] Chrome
[ ] not tested on others

aravindnc commented 5 years ago

@floribon Do npm install web-animations-js Then include after webcomponents-loader in the html file.

floribon commented 5 years ago

@aravindnc ideally I wouldn't change the containing HTML page as I'm only producing a JS file of my web component.

So there is no way for it to be self contained? (except for webcomponents-loader which make sense to be an external file for polyfils)

matthinea commented 5 years ago

If you're only producing a JS file of your web component, you should be able to just import that JS file.

(In Rails importing web-animations-next-lite in application.js worked for me.)

$ yarn add web-animations-js

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

floribon commented 5 years ago

@mnd-dsgn thanks, I tried that but when I import that file I get a

TypeError: Cannot set property 'true' of undefined

This is because that script uses a global this which in my case is some webpack internals. Replacing this with window in web-animations-next-lite seems to fix the problem.

Would that qualify for a bug? No other dependencies that I've seen relies on a global this.

leegee commented 5 years ago

This is because that script uses a global this which in my case is some webpack internals. Replacing this with window in web-animations-next-lite seems to fix the problem.

Would the allowTopLevelThis from babel-plugin-transform-modules-commonjs ? Not ideal....

evayde commented 5 years ago

Solutions above didnt work for me. Turned the animations off and wrote my own stuff. If that could also work for you just opt-out using the no-animations attribute <paper-dropdown-menu label="..." no-animations>

PolymerElements / paper-dropdown-menu

Crashes when clicked: KeyframeEffect is not defined #305

Browsers Affected