1

I have built a javascript library which attach pointer events listeners to a DOM element (here). Today, I'm using it in a Polymer 1.9 web component to wrap it, using PEP to polyfill pointer events on Firefox, and it works fine:

<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>

I'm just doing elementDomElement.addEventListener('pointerdown', (e) => { // Some code }); under register, nothing special.

After migrating to Polymer 2 I have something like that:

<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>

Pointer events are correctly handled under Chrome and Edge, but in Firefox events are stuck on the shadowRoot. I can handled them if I'm listening on this, e.g. the shadowRoot, but not on the editorDomElement.

Am I doing something wrong or is it an issue on Polymer 2 event forwarding on Firefox? Is there a solution or workaround to make it work? Thanks

FXG
  • 1,308
  • 1
  • 12
  • 21
  • full Polymer 1.9 code: https://github.com/MyScript/myscript-common-element/blob/2.0.0-alpha1/myscript-common-element.html – FXG Jun 30 '17 at 15:45

1 Answers1

0

in Polymer 2.0, events will stop and vanish in a smoke on shadowRoot bounds.

If you want to make the events leak to outside the shadowRoots, you will need to pass the composed attribute in the dispatchEvent function :

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

read more here : Fire Custom Events (polymer-project.org)

vdegenne
  • 12,272
  • 14
  • 80
  • 106
  • 1
    Yes, I've read that, but my issue is not to dispatch events, it's to catch them, and only pointer events on Firefox. Sorry if it's not explicit, I will change the topic name. – FXG Jul 03 '17 at 07:11