Paste event on document not triggered in Polymer 2

[feuerste]

Description

After adding an event listener on the 'paste' event to the document, the event is never triggered in Polymer 2. In 1.8.1, everything works as expected.

Live Demo

I only tested the jsbin on Chrome.
Working (v1.8.1): https://jsbin.com/kohojo/edit?html,console,output
Not working (v2.0.0-rc.3): https://jsbin.com/geyejeb/edit?html,console,output

Steps to Reproduce

Run each of the live demos. When loaded, focus the "Output" window, press "Alt + Print Screen" and "Ctrl + V" (on Windows) or "Shift + Ctrl + Cmd + 3" and "Cmd + V" (on Mac) to try to paste an image.

Alternatively, to test other browsers, I used the polymer-2-application and polymer-1-application with "polymer init". I didn't test on Safari 8, 9, and IE 11, but expect the same behavior.

Expected Results

I can get a paste event in Polymer 2, too.

Actual Results

No paste event is triggered in Polymer 2.

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Polymer: v2.0.0-rc.3
• webcomponents: v1.0.0-rc.5

[dfreedm]

Wow, looks like you stumbled onto a ShadowDOM v1 spec bug.
This demo only works in Chrome, but shows that the paste event is not set to bubble through ShadowDOM v1: https://jsbin.com/pobugig/edit?html,console,output

I'll bring this up with the spec team.

[jsilvermist]

The problem is that the event is being captured by the shadowRoot, and was not emitted using {composed: true} so it doesn't cross the shadow-dom boundary.

I had the same issue when working with the Fullscreen API, and the fullscreenchange event didn't cross the dom boundary.

The reason you're seeing this now, is that this doesn't happen when using the polyfill, so you have to handle this differently for different browsers (eg. firefox vs chrome).

If you change

document.addEventListener('paste', this._onPaste.bind(this));

to

this.shadowRoot.addEventListener('paste', this._onPaste.bind(this));

you can see the event is being captured by the element.

[dfreedm]

Ah, looks like ClipboardEvent was excluded from being composed: true for a lack of use cases: WICG/webcomponents#513 (comment)

Seems like it should be easy to make a case for including them.

[feuerste]

Thanks a lot for your feedback and the clarifications. Our use case is that we want to capture paste events on the global root element containing all other elements, so it doesn't matter which element is currently focused. @jsilvermist's workaround works, if you only have one element (as in my original jsbin). However, if you have a hierarchy of elements, as in https://jsbin.com/mijehel/edit?html,console,output, I would have to capture paste events in all possible children.
Is there any other easy way to achieve, what we want?

@azakus, could you please keep me updated on whether and when you think that ClipboardEvent can be included in being composed: true?

[kevinpschaaf]

Shorter-term, probably the best approach would be to make a "ForwardClipboardEvents" mixin that listens for clipboard events on the shadowRoot and re-fires them on the shadowRoot's host, and apply that to your elements that contain inputs.

Unfortunately, the shadydom polyfill currently doesn't support shadowRoot.addEventListener, but we have a tracking bug to implement that here: webcomponents/shadydom#82.

Until then, seems like a mixin could just do this.shadowRoot.querySelectorAll('input,[contenteditable]').forEach(el=>el.addEventListener(...)) for the events that needed forwarding.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!