如何使用 Polymer 2 在 Firefox 上的 web 组件中捕获指针事件？

Question

我已经构建了一个 javascript 库，它将指针事件侦听器附加到 DOM 元素 (here)。今天，我在 Polymer 1.9 web 组件中使用它来包装它，使用PEP 来填充 Firefox 上的指针事件，它工作正常：

<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 });，没什么特别的。

迁移到 Polymer 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 和 Edge 下被正确处理，但在 Firefox 中事件被卡在 shadowRoot 上。如果我正在收听this，我可以处理它们，例如shadowRoot，但不在 editorDomElement 上。

我做错了什么还是 Firefox 上的 Polymer 2 事件转发有问题？是否有解决方案或解决方法使其工作？ 谢谢

Answer 1

在 Polymer 2.0 中，events 将停止并消失在 shadowRoot 边界上的烟雾中。

如果你想让事件泄漏到shadowRoots之外，你需要在dispatchEvent函数中传递combined属性：

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

在这里阅读更多：Fire Custom Events (polymer-project.org)