Question

我正在从Tomcat服务器提供一个简单的聚合物元素。该元素在Chrome中运行良好，但在最新版本的Firefox 49.0.2中失败。我已经将内容添加到了两个元素中，问题似乎发生了，因为WebComponentsReady事件在Firefox中反复激发，但在Chrome中只反复四次。

此外，通过在下面的简单元素中包含纸张滑块元素，导致Firefox进入一个循环，它不断重复加载文件？

＆＃13;

<link rel="import" href="./bower_components/paper-slider/paper-slider.html">

＆＃13;

发生了什么事？

simple-element-demo.html（下）

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="Demo of simple element">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>
  </script>
  <script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
  </script>
  <link rel="import" href="./bower_components/polymer/polymer.html">
  <link rel="import" href="./simple-element.html"></link>
</head>

<body>
  <div>Hello! I am going to demo simple-element. See below me.</div>
  <simple-element></simple-element>
</body>
<script>
  document.addEventListener('WebComponentsReady', function(e) {
    console.log('WebComponentsReady', e);
    debugger;
  });
</script>

</html>

＆＃13;

下面的simple-element.html

＆＃13;

<!doctype html>
<html>

<head>
  <title>Simple Element</title>
  <script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
  </script>
  <link rel="import" href="./bower_components/polymer/polymer.html">
  <link rel="import" href="./bower_components/paper-slider/paper-slider.html">
</head>

<body>
  <dom-module id="simple-element">
    <template>
      <div class="container flex-horizontal">
        Hi There! I am Simple Element.
      </div>
    </template>

    <script>
      Polymer({
        is: 'simple-element',
        properties: {
          prop1: {
            type: String,
            notify: true
          },
        },

        created: function() {
          console.log('Simple is created');
        },

        ready: function() {
          console.log('Simple is ready');
        }
      });
    </script>
  </dom-module>
</body>

</html>

＆＃13;

Answer 1

我能够通过在主文件中包含webcomponents-lite.js 一次来解决问题：simple-element-demo.html。

我从simple-element.html中删除了以下行，现在它在所有浏览器中都运行良好。

<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>

来自Web服务器的简单Polymer元素适用于Chrome，但不适用于Firefox或Safari或IE

1 个答案: