scrollableContainer Option Doesn't Work with Shadow DOM in Micro Frontend

[bertanyaman]

Hello Froala team,

I am using the Froala Editor as a licensed package within a micro frontend architecture where CSS isolation is handled through Shadow DOM. In this setup, the editor is embedded in a shadow root, and I am trying to use the scrollableContainer property. I have set the property value to a string that matches the id of a div inside the Shadow DOM, for example:

scrollableContainer: "#myContainer"

However, it seems that the editor cannot find the container within the Shadow DOM, likely because Froala is attempting to retrieve the element using document.getElementById("myContainer"), which only works for elements in the Light DOM.

You can reproduce the issue in the following CodeSandbox:
CodeSandbox Link

I believe this issue is caused by the way the editor interacts with the DOM outside of the shadow boundary. It would be helpful if Froala could either support querying elements within the Shadow DOM or provide a way for developers to pass a reference to the scrollableContainer instead of just a string.

Thank you for looking into this!