Does Foblex support Shadow DOM (Angular Elements / Web Components)?

[tisufa]

Hi,

I'm integrating Foblex inside an Angular Element using ViewEncapsulation.ShadowDom.

I noticed that pointer interactions don't work correctly inside the Shadow DOM. As a result, nodes cannot be clicked or dragged.

While debugging, I found that the issue seems related to IPointerEvent (i-pointer-event.ts).

During the initial pointerdown event:

event.target
// <app-testing> (Shadow DOM host)

event.composedPath()
// [actual clicked element, ..., shadowRoot, app-testing, ...]

event.composedPath() correctly contains the actual clicked element inside the Shadow DOM.

Is Shadow DOM currently supported by Foblex?

If not, would using event.composedPath() to resolve the original target be the correct direction for supporting Shadow DOM?

Thank you!

[siarheihuzarevich]

Hi,

Thanks for the detailed report and for investigating it.

At the moment, Shadow DOM hasn’t been explicitly tested or officially supported by Foblex, so I can’t guarantee that it works correctly in this mode.

From your description, the issue makes sense. Since events are retargeted when crossing the Shadow DOM boundary, relying solely on event.target is likely the reason why pointer interactions fail.

Using event.composedPath() to resolve the original event target sounds like the right direction. I’ll investigate whether we can safely use it (with event.target as a fallback for browsers/environments where necessary) without affecting the existing behavior.

Thanks again for reporting this!

[tisufa]

Thank you for the clarification and for looking into this.

I appreciate it and look forward to any updates.

Thanks again!

[siarheihuzarevich]

Hi @tisufa 👋

Good news — this issue has been fixed in Foblex Flow v19.1.0. Pointer interactions now work when the flow is rendered inside Angular Elements or ViewEncapsulation.ShadowDom with an open shadow root.

Normal DOM targeting remains unchanged: event.target is still used first, and composedPath() is used only when Shadow DOM retargeting hides the original element.

✅ Release: https://github.com/Foblex/f-flow/releases/tag/v19.1.0

Thanks again for the detailed report and for pointing us in the right direction!

And if you like what we’re building, please consider starring the repo — it really helps ⭐️
🌟 Star the repo