We use the React web framework for our application, but I think this applies to other frameworks as well.. There are many web frameworks these days. Most of the time you use them in a single page web application model. So you will have the same issues in any framework if you want to have several instances of the XML Editor running in your single-page application. We implemented the actual wrapper hosting the shadowRoot in plain javascript similar to the code in the xxe-client. We then created a React component on top of that to integrate it with the rest of our application.
We have only tested these shadowRoot changes on Chrome so far, which is what we support for our own customers. We run our App on Chrome on MacOS, Windows and Linux. According to documentation online about the shadowRoot.getSelection API, it is not supported in all browsers, but there are alternative ways to do the same thing, so we understand. We'll do testing on other browsers and report. Carlos On Thu, Nov 20, 2025 at 6:01 PM Hussein Shafie <[email protected]> wrote: > Carlos Villegas wrote: > > Based on your explanation, we managed to run the editor in a shadowRoot > host. > > This is what we did: > > > > We created a wrapper element to the xxe-client to serve as a host > for the shadowRoot. More on this later. > > We modified DocumentView to be able to set the domTree with the > shadowRoot. Fortunately, DocumentView already has a domTree property that > is set to document by default. DocumentView needs to be aware that it is > running in a shadowRoot as some Web APIs need to be adjusted accordingly. > > Modern browsers now support the link element directly under the > shadowRoot, so static stylesheets can be added here. > > For the dynamic stylesheets of the document views, we created a > stylesheet object to be "adopted" by the shadowRoot. Fortunately, we can > use the same API to dynamically change the CSS rules as required, so that > part of DocumentView doesn't have to be modified, only setup the stylesheet. > > We changed calls to window.getSelection to shadowRoot.getSelection > in several places if DocumentView is running in a shadowRoot. I think > NodeView and MarkManager use this API. > > I think that's about it. We modified the distributed xxeclient code > that fortunately is only cleaned up a bit, not mangled completely. > > This is done on purpose. We want to keep the JS code easy to read and > easy to understand. > > > > I think a proper solution will probably use the xxe-client directly > as the host for the shadowRoot, but that requires a bit more work as > sometimes some objects are located using a DOM query from the xxe-client > element and that needs to be changed in several places to use the > shadowRoot as context for the queries. > > Sure. > > > > With these changes we were able to implement a multi-tab editor > running in a React single page application, and also use it as a generic > element selection dialog for selecting link targets in our schemas. > > I must confess that I'm completely ignorant about React. However I do > understand the "multi-tab editor" and the "generic element selection > dialog" requirements. > > > > > We still need other features from our changes to the standalone > editor related to custom widgets and CSS components to be able to replace > the standalone editor completely, our goal. We'll keep evaluating this web > editor to see if it's a feasible path for updating our application. > > > Wow! Impressive. > > We certainly do not want our customers to go to these (rather extreme) > lengths to be able to integrate Web Edition to their web app. Therefore > may be it's time for us to give ShadowRoot a second chance (while at it, > for both DocumentView and XMLEditor). > > Just one question: which web browser have you used to test your > prototype? Just Chrome? > > We want XMLmind XML Editor to run on Chrome, Firefox and Safari (that > is, the 3 different "web engines"). For now, it works fine on Chrome and > Firefox but not on Safari. Surprisingly, the problem with Safari is not > the HTML+CSS+JS part but the Web Socket part. The Web Socket client > which is part of Safari seems to behave quite oddly. > > > > > >
-- XMLmind XML Editor Support List [email protected] http://www.xmlmind.com/mailman/listinfo/xmleditor-support
