Polymer webcomponents cross-browser compatibility

Question

I'm having frequent problems when using Google Polymer with non-Chrome browsers (Firefox/IE). Using Polymer on its own (such as viewing Polymer Element demo pages) does not seem to cause any issues. However, issues arise when using webcomponents.js is included on an existing web-application with many included GUI and utility packages (jQueryUI,

The issue seems to be related to webcomponents.js specifically. If no HTML imports are used and only webcomponents.js is imported, it throws the same error in both Firefox and IE:

webcomponents.js:2114 - SyntaxError: An invalid or illegal string was specified
webcomponents.js:113 - Error: Assertion failed

The specific line of webcomponents.js simply reads:

list = originalDocumentQuerySelectorAll.call(target, selector);

- which seems to have no immediately obvious syntax error.

Due to this error, other GUI elements on the page now exhibit erroneous behavior. There is no other useful console output provided when this happens, and no exceptions thrown by other JS packages. None of this behavior is shown when using Chrome.

Answer 1

I had the same error. I solved it, loading webcomponents.js before jquery.js.

Answer 2

I've tested with the last version of webcomponents.js in the last version of Firefox, simply loading it (no other import used) and it seems to work...

Test here

Plunker here

Did you tried with the last version of webcomponents.js or it was an old one? How about the version of Firefox?

Couldn't test on IE, I'm on linux, sorry.

Answer 3

I had the same problem when loading jQuery(v1.10.2) and polymer(webcomponents.js).

Fixed it using jQuery v2.1.4.

Answer 4

我能够通过从脚本中删除$(document).ready来解决这个问题。

Answer 5

Not quite sure if this is still relevant but I bumped into this recently while running the unit tests using web-component-tester for a Polymer 1.11 based application. This issue start appearing on chrome v81 and was working fine before.

So, in each of the spec file we have an import for webcomponents.min.js which I replaced with webcomponents-lite.min.js and that worked for me.