Polymer 2でFirefox上のWebコンポーネントでPointerイベントを捕捉する方法は？

Question

私はDOMエレメント（here）にポインターイベントリスナーを付けるjavascriptライブラリーを構築しました。今日、私はFirefoxの上のポインタイベントをポリフィルするPEPを使用して、それをラップするポリマー1.9 Webコンポーネントでそれを使用していて、それが正常に動作します：

<link rel="import" href="./pepjs-import.html"> 
<link rel="import" href="./myscriptjs-import.html"> 

<dom-module id="myscript-common-element"> 
<template> 
    <style></style> 
    <div id="editorDomElement" class="ms-editor"></div> 
</template> 
<script> 
    Polymer({ 
       is: 'myscript-common-element', 
       properties: {}, 
       attached: function() { 
        this.editorDomElement = this.querySelector('#editorDomElement'); 
        // Attach an editor to the DOM element and listen pointer events 
        this.editor = MyScript.register(this.editorDomElement, this.buildConfiguration(), this.buildCustomStyle()); 
       } 
      } 
    ); 
</script> 

私はちょうどレジスタの下elementDomElement.addEventListener('pointerdown', (e) => { // Some code });をやっています、 特にない。

ポリマー2に移行した後、私はそのような何かしている：

<dom-module id="myscript-common-element"> 
<template> 
    <style></style> 
    <div id="editorDomElement" class="ms-editor"></div> 
</template> 
<script> 
    class MyScriptCommonElement extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) { 

     static get is() { 
      return 'myscript-common-element' 
     } 

     connectedCallback() { 
      super.connectedCallback(); 
      this.editorDomElement = this.shadowRoot.querySelector('#editorDomElement'); 
      this.editor = MyScript.register(this.editorDomElement, this._buildConfiguration(), this._buildCustomStyle()); 
     } 
    } 
    customElements.define(MyScriptCommonElement.is, MyScriptCommonElement); 
</script> 

ポインタイベントが正しくChromeとエッジの下で処理されますが、FirefoxのイベントにshadowRootに立ち往生しています。もし私がthisで聴いていると、私はそれらを扱うことができます。 shadowRootですが、editorDomElementにはありません。

私は何か間違っているのですか、またはFirefoxのPolymer 2イベント転送に関する問題ですか？それを動作させるための解決策または回避策がありますか？ ありがとう

Answer 1

ポリマー2.0では、eventsは、シャドウルートの煙の上で煙が止まり、消えます。

あなたはイベントがshadowRoots外に漏れるようにしたい場合は、あなたがにdispatchEvent機能で合成属性を渡す必要があります：

this.dispatchEvent('my-event', { bubbles: true, composed: true }); 

はこちら続きを読む：Fire Custom Events (polymer-project.org)