Detect target inside a shadow root for clickOutsideHandler

[ywsang]

📝 Provide a description of the improvement

clickOutsideHandler currently works by checking whether the click target is one of the context elements. However, when the editor is placed in a shadow root, any click events on the editor are retargeted such that they appear to target the entire editor and not a specific element within the editor.

Because of event retargeting, clickOutsideHandler doesn't function as expected when the editor is in a shadow root. For example, clickOutsideHandler is used to detect when a click outside a dropdown view occurs so that the dropdown view can be collapsed. However, in a shadow root, an event clicking on the dropdown view itself is retargeted so that target is not the dropdown view, and the click triggers dropdown view to be closed. Looking at the event's composed path instead of just target can reveal whether the original target included the context element(s).

📃 Other details

Improving this would be a step in supporting running the editor in shadow DOM (#3891), making a Web Component for CKEditor more possible (#1483)!

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Reinmar]

Thank you for a detailed issue :) And even more for the PR 😍

Would you be able, perhaps, to add a test to the PR?

[khiemyc]

copy css line dom to shadown dom