Polymer webcomponents 跨浏览器兼容性答案

【问题标题】：Polymer webcomponents cross-browser compatibilityPolymer webcomponents 跨浏览器兼容性
【发布时间】：2020-04-30 11:41:21
【问题描述】：

在非 Chrome 浏览器 (Firefox/IE) 上使用 Google Polymer 时经常遇到问题。单独使用 Polymer（例如查看 Polymer Element 演示页面）似乎不会导致任何问题。但是，当使用 webcomponents.js 包含在包含许多 GUI 和实用程序包（jQueryUI，

这个问题似乎与 webcomponents.js 相关。如果没有使用 HTML 导入并且仅 webcomponents.js 被导入，它会在 Firefox 和 IE 中引发相同的错误：

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

webcomponents.js 的具体行简单写成：

list = originalDocumentQuerySelectorAll.call(target, selector);

- 似乎没有立即明显的语法错误。

由于此错误，页面上的其他 GUI 元素现在表现出错误行为。发生这种情况时没有提供其他有用的控制台输出，也没有其他 JS 包抛出异常。使用 Chrome 时不会显示此行为。

【问题讨论】：

标签： javascript html firefox polymer

【解决方案1】：

我有同样的错误。我解决了，在 jquery.js 之前加载 webcomponents.js。

【讨论】：

【解决方案2】：

我已经在最新版本的 Firefox 中使用最新版本的 webcomponents.js 进行了测试，只需加载它（没有使用其他导入），它似乎可以工作......

Test here

Plunker here

您是否尝试过使用最新版本的 webcomponents.js 或者它是旧版本？火狐的版本怎么样？

无法在 IE 上测试，我在 linux 上，抱歉。

【讨论】：

【解决方案3】：

我在加载 jQuery(v1.10.2) 和 polymer(webcomponents.js) 时遇到了同样的问题。

使用 jQuery v2.1.4 修复它。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

不太确定这是否仍然相关，但我最近在使用基于 Polymer 1.11 的应用程序的 web-component-tester 运行单元测试时遇到了这个问题。此问题开始出现在 chrome v81 上，之前运行良好。

因此，在每个规范文件中，我们都有一个 webcomponents.min.js 的导入，我将其替换为 webcomponents-lite.min.js，这对我有用。

【讨论】：