Support composed events to cross the Shadow DOM boundary

[AlexKamaev]

jQuery version is 3.6.0.

What do you expect to happen?

I want to somehow handle event which was triggered by the trigger method inside the ShadowDOM

What actually happens?

Nothing happened. The triggered events do not bubbles out of ShadowDOM.
For native events I can use the composed property. But it looks like I cannot do the same with jQuery events and the trigger method.

Which browsers are affected?

Chrome

Description

Please take a look at the example I provided: https://output.jsbin.com/joxayaxoki/1
When I click on the Dispatch Button it works perfectly.
How can I achieve the same result with the Trigger Button.

Link to test case

https://output.jsbin.com/joxayaxoki/1

[BRAiNCHiLD95]

Hi @AlexKamaev

From the jQuery Docs for .trigger()

Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

In your code, you are register the custom_event by binding onto document.

Therefore, .trigger('custom_event') must also be executed on the same element (i.e. document - in this case).

Also, you had accidentally added two handlers to btnDispatch - but that's not the main reason for failure.

Updating the last few lines from your example to -

$(btnTrigger).click(function () {
    $(document).trigger('custom_event');
})

fixes the problem.

[mgol]

Thanks for the report. There's no support for the composed property in jQuery. We can consider this for 5.0.0 as we'll be doing a big refactor of the event module in this version. Before that, it won't be possible, though.

I'll add this to the milestone to not forget. I also updated the title to be more straight to the point.

[mgol]

@dmethvin do you see anything fundamentally against this idea? Or is it fine to research this for 5.0.0?

[mgol]

A cleaned up test case: https://jsbin.com/mutoqep/1/edit?html,js,output

[dmethvin]

Researching this sounds fine. We've talked about using the native dispatchEvent before, which would fix this case at the expense of many other breaking changes. Dispatching an event runs the associated handlers but doesn't trigger the native behavior of such an action. So elem.dispatchEvent("submit") runs the submit handler but doesn't submit the form, whereas $(elem).trigger("submit") does both.