在 Windows 上使用 Webjars 的 Polymer Web 组件和 Mozilla Firefox答案

【问题标题】：Polymer Web components and Mozilla Firefox on Windows using Webjars在 Windows 上使用 Webjars 的 Polymer Web 组件和 Mozilla Firefox
【发布时间】：2017-10-03 18:25:54
【问题描述】：

我正在尝试为 Firefox 启用 Polymer Web 组件，以便可以在 Firefox 上浏览我的 Polymer 网页。

我尝试了这些说明，但没有任何改变，而且 Firefox 似乎完全忽略了我的组件。

https://www.designedbyaturtle.co.uk/2015/how-to-enable-web-components-in-firefox-shadow-dom/

我还在我的index.html 中导入了webcomponents.js polyfill。

所以，我所做的如下：

我在elements目录下写了如下web组件test-firefox.html：

<dom-module name="test-firefox">
  <template>
    <h2>Firefox says hi too!</h2>
  </template>
  <script>
    Polymer({
      is: 'test-firefox'
    });
  </script>
</dom-module>

这是我的index.html 文件：

<!doctype html>
<html>
  <head>
      <link rel="import" href="webjars/polymer/1.6.1/polymer.html">
      <script src="webjars/webcomponentsjs/0.7.22/webcomponents.js"></script>
      <script src="webjars/webcomponentsjs/0.7.22/webcomponents-lite.min.js"></script>

      <link rel="import" href="elements/test-firefox.html">

  </head>
  <body>
    <h1>Hello Firefox!</h1>
    <test-firefox></test-firefox>
  </body>
</html>`

如您所见，我使用的是对应的webjars（用于Polymer、webcomponents.js、webcomponents-lite.min.js）而不是bower_components。我已经在pom.xml 中添加了依赖项，它们通常已安装。

所以我注意到发生的事情很奇怪：

对于 Google Chrome，一切正常。
对于 Linux 上的 Mozilla Firefox，同样如此。
对于 Win10 上的 Mozilla Firefox，Web 组件没有被渲染，就像浏览器完全忽略它一样。

有什么想法吗？

【问题讨论】：

标签： firefox compatibility polymer-1.0 webjars

【解决方案1】：

你能改写你的问题吗？

您无需启用任何功能即可让网站在 Firefox 中运行（当然，您可以访问 https://www.polymer-project.org/，它对您有用）。

如果 Firefox “忽略”您的组件，可能您缺少这些元素的导入。

查看此页面https://www.polymer-project.org/1.0/docs/devguide/registering-elements 并了解如何使用<link rel="import" href="bower_components/polymer/polymer.html">。您还需要以这种方式导入您自己的组件才能使其正常工作。

【讨论】：

感谢您的回答。我重写了上面的问题，以便提供更多信息。我之前没有提到过，重要的是我正在使用 webjars。如果您对此有任何经验/想法，我将不胜感激。
对不起，我没有使用 webjars 的经验。一般来说，您的代码看起来不错 - 但您应该只使用 webcomponents-lite.min.js - 请从该文章中删除 webcomponents 的内部 Firefox 标志 - 它可能会破坏您的代码中的某些内容。另外请查看您浏览器的控制台 - 看看您是否没有得到一些不正确的导入路径和 404。