Sorry, hit the wrong key and it was sent unfinished. As I was saying: 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. - 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. - 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. - 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. Regards, Carlos On Thu, Nov 20, 2025 at 11:38 AM Carlos Villegas <[email protected]> wrote: > A late reply, but thanks for the insight. > > 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 xxeclient 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 is > running in a shadowRoot as some Web APIs need to be adjusted accordingly. > > Carlos > > > > > On Thu, Oct 9, 2025 at 5:46 PM Hussein Shafie <[email protected]> wrote: > >> Carlos Villegas wrote: >> > I'm trying to use several instances of the xxeclient in the same page >> and I'm seeing "cross talk" between the instances, well, what I mean, some >> CSS styles in the first instance change while I open the second instance, >> and then go back to what it was, when I delete the second instance. >> > >> > What I'm trying to do is to have my main editor in the page and open a >> second instance in an popup dialog box, which is a component I'm using from >> a 3rd party library, which I think just renders the dialog box over the >> page using a different zindex. In this second instance I open a different >> document that uses the same doctype and stylesheet, same XXE configuration, >> but in read only mode. The purpose is to select an element from this other >> document as an aid to create a link. The popup doesn't cover the whole page >> so I can see part of the main editor. >> > When I do this I see some styles in the main document change, for >> example, some title elements in my custom schema lose their bold style and >> larger font size. When I close my popup window, which deletes the second >> xxeclient instance, things go back to normal. I probably can live with >> this, but it's a bit confusing for the user, and I don't know if other >> internal things were also affected and mixed up between the instances. >> > >> > I tried to put my second instance in a shadowRoot to isolate the >> styles, but I had several problems, xxeclient's documentView running in the >> shadowRoot gives errors and it doesn't find node views. I traced some of >> the issues, for example, _domTree iin DocumentView s initialized to be the >> global DOM document object which is disconnected from the xxeclient DOM >> tree when running in the shadowRoot. I did some changes to the xxeclient >> just to test if it would work, and I got it partially working, enough to >> see that even in the shadowRoot, my original problem still persists, it >> still affects styles in the other instance. Probably some styles are >> applied programmatically globally and requires more effort to completely >> isolate the styles in the instances. I'm also wrapping the xxeclient in a >> React component and creating 2 instances of this React component. I don't >> know if that is also part of the problem, but that just creates two >> instances of the xxeclient DOM element and the XMLEditor object. >> > >> > Any suggestions to have 2 completely separate xxeclient instances in >> the same page? >> >> Well it's currently not possible to have more than <xxe-client> instance >> in the same HTML page. >> >> It works as follows: >> >> 1) When added to the page, <xxe-client> adds a <style> element to >> <html><head>. The content of this <style> element is specific to >> <xxe-client>. >> >> 2) When you open an XML document, a number of ".xxe-sNNN" CSS rules are >> added to this <style> element. >> >> 3) When you edit the opened XML document, more ".xxe-sNNN" CSS rules may >> be added to this <style> element. >> >> 4) When you close the XML document, this <style> element is made empty. >> >> The issue you describe is caused by the fact that the CSS rules added by >> different instances of <xxe-client> all have the same ".xxe-sNNN" >> selectors. The problem could be solved by using ".xe1-sNNN" selectors >> for first instance, .xe2-sNNN" selectors for second instance and so on. >> >> >> --> Why not use a shadow DOM for <xxe-client> on order to prevent the >> ".xxe-sNNN" CSS rules from "bleeding" to the rest of the HTML page, >> including the other <xxe-client> instance? >> >> The answer is that we did this at the early stages of XXEW development >> but we abandoned this more elegant approach that because it caused other >> problems (Shadow DOM and selection API problems; may be solved now). >> >> >> >> > >> > Another idea is to use an iframe to put the second instance, but >> iframes are also tricky especially in terms of security, sometimes they get >> restricted by the browser. But I'll give it a try next. >> > >> >> >>
-- XMLmind XML Editor Support List [email protected] http://www.xmlmind.com/mailman/listinfo/xmleditor-support
