Полимерная привязка не работает в Firefox

Я вижу проблему, из-за которой связанное значение «тест» отображается на демонстрационной странице в Chrome, но не в Firefox. Я уже включаю полифиллы (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>

элемент билета

<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 источник


Ответы (2)


Во-первых:

Пользовательские имена элементов. По спецификации имя пользовательского элемента должно начинаться со строчной буквы ASCII и содержать тире (-). Также есть краткий список запрещенных имен элементов, которые совпадают с существующими именами. Подробнее см. в основных концепциях пользовательских элементов в спецификации HTML.

Итак, вы должны изменить имя элемента "item".

Вместо того, чтобы загружать webcomponents-lite.js напрямую, загрузите webcomponents-loader.js (загрузчик на стороне клиента, который динамически загружает минимальный пакет полифилла, используя обнаружение функций), который сделает все остальное.

ссылка Plnkr: работает как в Firefox, так и в Chrome.

person Ofisora    schedule 09.08.2017
comment
Большое спасибо Ofisora ​​за то, что нашли время добавить пример в plnkr. Я намеренно переименовал ссылки на свой компонент только в этом посте, просто чтобы сделать его более неясным, но, как вы указали, это неверно, поэтому я изменил его, чтобы избежать путаницы. Однако спасибо за замечание о соглашении об именах. Странно то, что я посмотрел на ваш пример и увидел, что он работает в FF, и когда я копирую точно такой же код в свой локальный код, он все равно не работает для меня в FF. Это очень странно. Я собираюсь попытаться воссоздать элемент и посмотреть, поможет ли это. - person brainmonger; 09.08.2017
comment
вау... я нашел проблему... проблема была в том, что я назвал свой компонент "ticket-item", а идентификатор был установлен на "ticket-item". По-видимому, это должно быть что-то отличное от «билет-пункт». Я меняю идентификатор на «предмет», и теперь я вижу привязку! - person brainmonger; 09.08.2017
comment
Я тоже поддерживаю ваш ответ, потому что он очень полезен. - person brainmonger; 09.08.2017

Проблема заключалась в том, что я назвал свой компонент «ticket-item», а идентификатор был установлен на «ticket-item». По-видимому, это должно быть что-то отличное от «билет-пункт». Я меняю идентификатор на «элемент», и теперь я вижу привязку.

person brainmonger    schedule 09.08.2017
comment
Кроме того, я думаю, что ваша функция is() должна быть { return 'ticket-item'; }, а не { return 'TicketItem'; }. - person Thad; 10.08.2017