Question

我遇到一个问题，我可以在Chrome上的演示页面上看到绑定的“测试”值，但不会出现在Firefox中。我已经包含了polyfills（webcomponents-lite.js），所以我真的不确定缺少什么。有任何想法吗？？提前谢谢。

票证项目演示页

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
    <title>ticket-item demo</title>
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
    <link rel="import" href="../../iron-ajax/iron-ajax.html">
    <link rel="import" href="../ticket-item.html">

    <script>
      window.addEventListener('WebComponentsReady', function() {
        let element = document.getElementById('ticket-item');
        element.test = 'test';
      });
    </script>
  </head>
  <body>
    <div class="vertical-section-container centered">
      <h3>Basic ticket-item demo</h3>
      <demo-snippet>
        <template>
          <ticket-item id="ticket-item"></ticket-item>
        </template>
      </demo-snippet>
    </div>
  </body>
</html>

ticket-item元素

<dom-module id="ticket-item">
  <template>
    <style include="my-theme">
      :host {
        display: block;
      }
    </style>
    <div>test: [[test]]</div>
  </template>

  <script>
    class TicketItem extends Polymer.Element {
      static get is() { return 'TicketItem'; }
      static get properties() {
        return {
          test: String
        };
      }
    }
    window.customElements.define(TicketItem.is, TicketItem);
  </script>
</dom-module>

Answer 1

第一件事：

自定义元素名称。根据规范，自定义元素的名称必须以小写的ASCII字母开头，并且必须包含短划线（ - ）。还有一个与现有名称匹配的禁止元素名称的简短列表。有关详细信息，请参阅HTML规范中的Custom elements core concepts部分。

因此，您必须更改“item”元素的名称。

不是直接加载webcomponents-lite.js，而是加载webcomponents-loader.js（动态加载最小polyfill包的客户端加载器，使用特征检测），其余的将完成。

Plnkr link：适用于Firefox和Chrome。

Answer 2

问题在于我将我的组件命名为“ticket-item＆＃39;并且id被设置为＆＃39; ticket-item＆＃39;。它显然需要与“票品”不同。我将ID更改为＆＃39; item＆＃39;现在我看到了绑定。

聚合物绑定在Firefox中不起作用

2 个答案: