Pengikatan polimer tidak berfungsi di Firefox

Saya melihat masalah ketika saya dapat melihat nilai 'tes' terikat muncul di halaman demo di Chrome tetapi tidak di Firefox. Saya sudah menyertakan polyfill (webcomponents-lite.js) jadi saya tidak yakin apa yang hilang. Ada ide?? Terima kasih sebelumnya.

halaman demo item tiket

<!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="/id../../iron-demo-helpers/demo-pages-shared-styles.html">
    <link rel="import" href="/id../../iron-demo-helpers/demo-snippet.html">
    <link rel="import" href="/id../../iron-ajax/iron-ajax.html">
    <link rel="import" href="/id../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>

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

person brainmonger    schedule 09.08.2017    source sumber


Jawaban (2)


Hal pertama:

Nama elemen khusus. Berdasarkan spesifikasi, nama elemen khusus harus diawali dengan huruf ASCII kecil dan harus berisi tanda hubung (-). Ada juga daftar pendek nama elemen terlarang yang cocok dengan nama yang sudah ada. Untuk mengetahui detailnya, lihat Konsep inti elemen khusus bagian dalam spesifikasi HTML.

Jadi, Anda harus mengubah nama elemen "item".

Daripada memuat webcomponents-lite.js secara langsung, muat webcomponents-loader.js (pemuat sisi klien yang secara dinamis memuat bundel polyfill minimum, menggunakan deteksi fitur), yang akan melakukan sisanya.

Tautan Plnkr: berfungsi di Firefox dan Chrome.

person Ofisora    schedule 09.08.2017
comment
Terima kasih banyak Ofisora ​​telah meluangkan waktu untuk menambahkan contoh di plnkr. Saya sengaja mengganti nama referensi ke komponen saya menjadi 'item' di postingan ini saja, hanya untuk membuatnya lebih tidak jelas, tetapi seperti yang Anda tunjukkan, itu tidak benar, jadi saya mengubahnya untuk menghindari kebingungan. Terima kasih atas catatan tentang konvensi penamaan. Hal yang aneh adalah saya melihat contoh Anda dan melihatnya berfungsi di FF, dan ketika saya menyalin kode yang sama persis ke lokal saya, kode itu masih tidak berfungsi untuk saya di FF. Itu sangat aneh. Saya akan mencoba membuat ulang elemen tersebut dan melihat apakah itu membantu. - person brainmonger; 09.08.2017
comment
wow... Saya menemukan masalahnya... masalahnya adalah saya menamai komponen saya 'item-tiket' dan idnya disetel ke 'item-tiket'. Rupanya itu perlu sesuatu yang berbeda dari 'item tiket'. Saya mengubah id menjadi 'item' dan sekarang saya melihat ikatannya! - person brainmonger; 09.08.2017
comment
Saya juga memperbarui jawaban Anda karena ini sangat berguna. - person brainmonger; 09.08.2017

Masalahnya adalah saya menamai komponen saya 'item tiket' dan id disetel ke 'item tiket'. Rupanya itu perlu sesuatu yang berbeda dari 'item tiket'. Saya mengubah id menjadi 'item' dan sekarang saya melihat ikatannya.

person brainmonger    schedule 09.08.2017
comment
Selain itu, menurut saya fungsi is() Anda harus { return 'ticket-item'; }, bukan { return 'TicketItem'; }. - person Thad; 10.08.2017