event.composedPath() throws

[bmblb]

Description

Trying to read composedPath on event throws exception

Steps to Reproduce

1. create LWC app like in this playground: https://developer.salesforce.com/docs/component-library/tools/playground/9Xurl1YY9/1/edit
2. click on Click me div

Expected Results

div
(9) ["DIV", "DIV", undefined, "C-APP", "MAIN", "BODY", "HTML", undefined, undefined]
root
(9) ["DIV", "DIV", undefined, "C-APP", "MAIN", "BODY", "HTML", undefined, undefined]
document
(9) ["DIV", "DIV", undefined, "C-APP", "MAIN", "BODY", "HTML", undefined, undefined]

Actual Results

div
TypeError: Illegal invocation
    at Object.composedPathValue (aura_proddebug.js:473)
    at Object.SecureFunction (aura_proddebug.js:18838)
    at Proxy.eval (active_element_test.js:61)
    at HTMLDivElement.handleEvent (aura_proddebug.js:16832)
    at HTMLDivElement.fnOrObj.$$lwcEventWrapper$$ (aura_proddebug.js:2471)
root
TypeError: Illegal invocation
    at Object.composedPathValue (aura_proddebug.js:473)
    at Object.SecureFunction (aura_proddebug.js:18838)
    at Object.eval (active_element_test.js:52)
    at DocumentFragment.handleEvent (aura_proddebug.js:16832)
    at shadowRootWrappedListener (aura_proddebug.js:567)
    at aura_proddebug.js:650
    at Array.forEach (<anonymous>)
    at invokeListenersByPlacement (aura_proddebug.js:647)
    at HTMLElement.domListener (aura_proddebug.js:657)
document
TypeError: Illegal invocation
    at Object.composedPathValue (aura_proddebug.js:473)
    at Object.SecureFunction (aura_proddebug.js:18838)
    at Object.eval (active_element_test.js:43)
    at HTMLDocument.handleEvent (aura_proddebug.js:16832)
    at HTMLDocument.fnOrObj.$$lwcEventWrapper$$ (aura_proddebug.js:2471)

Browsers Affected

Tested in Chrome

Version

• "lwc-engine": "1.1.13-224.4"

Additional context/Screenshots
I found a PR which add event.path property: #859
event.path works like composedPath is supposed to, but since it is not in the spec I am not sure if it is safe to use it. I assume it can be removed without a notice? event.composedPath is part of spec though and it would be great to use it, if it wouldn't throw.

[caridy]

This is related to locker service, not LWC. As you can see in the playground, LWC works fine, but when inside locker in platform (and we can see some SecureFunction in the error stack), locker prevents access to such feature afaik. /cc @seksenov @manuel-jasso

[bmblb]

Can I use event.path though? I can see it was deliberately added as part of mentioned PR. Do you intend to support it in future?

[caridy]

No, event.path is non-standard. Yes, there are plans to support composedPath, @seksenov owns that timeline :)

[tomekduda]

Apologies for thread necromancy but do you have any news on the composedPath()?

I am trying to use https://visjs.org/ Timeline which internally uses https://github.com/naver/hammer.js (for easy use of touch gestures etc across multiple browsers). They have support for shadow DOM but (as far as I can tell) it sometimes dies on Lightning Locker. It's really weird, simple clicks on the timeline or mousewheel (triggers zoom in-out on the timeline) work fine but panning / dragging sideways doesn't call right handlers.

They have piece of code going like that

if (srcEvent.composedPath) {
    srcEventTarget = srcEvent.composedPath()[0];
} else if (srcEvent.path) {
    srcEventTarget = srcEvent.path[0];
} else {
    srcEventTarget = srcEvent.target;
}

In LWC input.srcEvent.composedPath exists but attempts to call it end up with SecureFunction's "Illegal Invocation" exception. As a temp hack I can experiment with commenting it out and using path.
Any idea what do you mean by it being non-standard? https://caniuse.com/?search=event%20path looks pretty good?

[nolanlawson]

@tomekduda I can't find any mention of event.path on MDN, but based on this SO answer and this quick test I wrote, it seems like it's supported in Chrome but not Firefox or Safari, and it doesn't seem to be on the standards track.

The issue you're running into with composedPath being blocked by Locker sounds like the same issue as the original poster.

[caridy]

that's correct, web components first iteration had 2 APIs that are now deprecated, path and composePath accessor, which became a method in the next iteration. The code above is trying to guess the best possible target, trying with composedPath first, the first element there is usually the original target in open shadows. The second branch is similar, but since that's not accessible in locker (doesn't support legacy path), then it is going to go with the target, and the target is probably not what you want for some cases since it was already retargeted.

As for the invalid invocation exception, that sounds more like a bug.

[bmblb]

Are there any news on the matter? Recently we noticed that every mouse event that we listen and try to read composedPath from - throws Illegal invocation error. Has smth changed recently with Locker Service that composedPath became inaccessible?

Can we use event.path?

[tomekduda]

My events started to work when I ditched Lightning Locker and switched the org over to Lightning Web Security.
But it's "all or nothing" global switch, it's not like Locker where you (in aura at least) choose API version and it turns it on/off.

[caridy]

...switched the org over to Lightning Web Security.

That's the way to go here, we will probably not be opening up any new DOM API in legacy locker at this point.

[bmblb]

@tomekduda unfortunately I cannot switch to Lightning Web Security just yet because library I'm working on does not yet support it.
So I just started using a try-catch for event.composedPath falling back to event.path. I suppose path should work for Locker Service and composedPath should be working when we eventually switch to LWS.

[caridy]

@bmblb

@tomekduda unfortunately I cannot switch to Lightning Web Security just yet because library I'm working on does not yet support it.

I want to learn more. If it works in legacy locker, it will work in LWS for sure. cc @manuel-jasso

So I just started using a try-catch for event.composedPath falling back to event.path. I suppose path should work for Locker Service and composedPath should be working when we eventually switch to LWS.

event.path is not standard, and will be missing in some browsers, e.g.: Safari and FF.

[bmblb]

@caridy I've just checked firefox, event.path works. Don't know about safari though

[caridy]

Object.getOwnPropertyDescriptor(Event.prototype, 'path')

Chrome has a descriptor there, Safari-15.4 and FF-98 doesn't.