Index не получает события shadow root в polymer

Я пытаюсь отобразить панель инструментов, которая принадлежит моему индексу.html-файл, основанный на событии, которое запускается в пользовательском элементе. Я попытался следовать примеру, приведенному в официальном документе здесь: https://www.polymer-project.org/1.0/docs/devguide/events#custom-events

Но это не работает…кажется, мой слушатель никогда не получает событие

мой пользовательский элемент:

<dom-module id="page2">
    <template>
     ...
     some HTML code here
     ...
     </template>

     <script>

     Polymer({
        is: 'page2',

        rowClicked: function (e) {
                this.fire('displayMenu');
            }
     });
     </script>

</dom-module>

и в моем указателе:

<page2></page2>

<script>
    document.addEventListener('WebComponentsReady', function () {

    document.querySelector('page2').addEventListener('displayMenu', function () {
        console.log('foo');
    });


});
    </script>
</body>

Так что да, ничего не происходит, я никогда не получаю «фу» в моей консоли.

1 ответ

  1. Ваш JS выглядит правильным, но имя элемента неправильно. Как указано в полимерных документах:

    По спецификации имя пользовательского элемента должно содержать тире ( -).

    Таким образом, "page2"не удалось бы Регистрация со следующей ошибкой (демо):

    «Ошибка: не удалось выполнить ‘registerElement’ на ‘Document’: ошибка регистрации для типа’page2′. Недопустимое имя типа.

    Если вы переименуете элемент, чтобы включить тире (например, «x-страница2»), вы должны увидеть свой пример работы:

    <head>
      <base href="https://polygit.org/polymer+:master/components/">
      <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel="import" href="polymer/polymer.html">
    </head>
    
    <body>
      <x-page2></x-page2>
      <script>
        document.addEventListener('WebComponentsReady', function() {
          document.querySelector('x-page2').addEventListener('displayMenu', function() {
            console.log('foo');
          });
        });
      </script>
    
      <dom-module id="x-page2">
        <template>
          <button on-click="rowClicked">click me to fire event</button>
        </template>
        <script>
          HTMLImports.whenReady(function() {
            Polymer({
              is: 'x-page2',
              rowClicked: function() {
                this.fire('displayMenu');
              }
            });
          });
        </script>
      </dom-module>
    </body>

    jsbin