Polymer 2 事件冒泡

Question

根据 documentation，文件 index.html 中的函数 x(e,d,t) 将不被称为，但实际上它是。我是不是误会了什么？

dom-element.html

<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<dom-module id="dom-element">
  <template>
    <button on-click="c">Click me!</button>
  </template>
  <script>
    class DomElement extends Polymer.Element {
      static get is() { return "dom-element"; }
      c(){
        /* this.dispatchEvent(new CustomEvent('x',{bubbles:true,composed:true,detail:"We do not need this to work!"})); */
        this.dispatchEvent(new CustomEvent('x',{detail:"yes"}));
      }
    }
    customElements.define(DomElement.is, DomElement);
  </script>
</dom-module>

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="dom-element.html">
  </head>
  <body>
    <dom-module id="root-element">
      <template>
          <dom-element on-x="x"></dom-element>
      </template>
      <script>
        class RootElement extends Polymer.Element{
          static get is() {return 'root-element'}
            x(e,d,t){
                console.log(d);
              }
        }
        customElements.define(RootElement.is,RootElement);
      </script>
    </dom-module>
    <root-element></root-element>
  </body>
</html>

Answer 1

<dom-element> 在 <root-element> 中触发的事件 'x' 不会跨越阴影 dom 边界。 <root-element> 在自己的阴影 dom、<dom-element> 中监听一个元素，它是 'x' 的发送者，不涉及边界交叉。

Polymer 2 事件冒泡

Polymer 2 event bubbling

polymer-2.x