索引不接收 polymer 中的影子根事件

Question

我尝试根据在自定义元素中触发的事件显示属于我的 index.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>

所以是的，没有任何反应，我的控制台中从来没有 "foo"...

Answer 1

你的JS看起来是正确的，但是元素名称是错误的。如 Polymer docs:

所示

By specification, the custom element's name must contain a dash (-).

因此，"page2" 将注册失败并出现以下错误 (demo)：

"Error: Failed to execute 'registerElement' on 'Document': Registration failed for type 'page2'. The type name is invalid.

如果您重命名该元素以包含破折号（例如，"x-page2"），您应该会看到您的示例工作：

<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

索引不接收 polymer 中的影子根事件

Index does not receive shadow root events in polymer

events

listeners

shadow

polymer