CODEWITHSUNDEEP
firefoxpolymerpolymer-2.x
brainmonger
brainmonger

Reputation: 687

Polymer binding not working in Firefox

I'm seeing an issue where I can see the bound 'test' value appear on the demo page on Chrome but not in Firefox. I'm already including the polyfills (webcomponents-lite.js) so I'm really not sure what's missing. Any ideas?? Thank you in advance.

ticket-item demo page

<!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 element 

<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>

Upvotes: 0

Views: 383

Answers (2)

brainmonger
brainmonger

Reputation: 687

The problem was that I named my component 'ticket-item' and the id was set to 'ticket-item'. It apparently needs to be something different from 'ticket-item'. I change the id to 'item' and now I'm seeing the binding.

Upvotes: 0

Ofisora
Ofisora

Reputation: 2737

The first thing:

Custom element names. By specification, the custom element's name must start with a lower-case ASCII letter and must contain a dash (-). There's also a short list of prohibited element names that match existing names. For details, see the Custom elements core concepts section in the HTML specification.

So, you must change the name of "item" element.

Instead of loading the webcomponents-lite.js directly, load webcomponents-loader.js (a client-side loader that dynamically loads the minimum polyfill bundle, using feature detection), that will do the rest.

Plnkr link: works both in Firefox and Chrome.

Upvotes: 1

Related Questions