Add supports for shadow DOM (#435)

* Add supports for shadow DOM Signed-off-by: Guillaume Fontorbe <[email protected]> * Misplaced comment Signed-off-by: Guillaume Fontorbe <[email protected]> --------- Signed-off-by: Guillaume Fontorbe <[email protected]>
eclipse-sprotty · Feb 21, 2024 · 6c77394 · 6c77394
1 parent c53713a
commit 6c77394
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/sprotty/src/base/views/viewer-options.ts b/packages/sprotty/src/base/views/viewer-options.ts
@@ -28,6 +28,8 @@ export interface ViewerOptions {
     hiddenDiv: string
     /** CSS class added to the base element of the hidden rendering. */
     hiddenClass: string
+    /** ID of the HTML element holding the shadow root. */
+    shadowRoot?: string
     /** ID of the HTML element into which hover popup boxes are rendered. */
     popupDiv: string
     /** CSS class added to the base element of popup boxes. */

diff --git a/packages/sprotty/src/base/views/viewer.tsx b/packages/sprotty/src/base/views/viewer.tsx
@@ -151,7 +151,15 @@ export class ModelViewer implements IViewer {
             this.lastVDOM = this.patcher.call(this, this.lastVDOM, newVDOM);
             this.restoreFocus(hadFocus);
         } else if (typeof document !== 'undefined') {
-            const placeholder = document.getElementById(this.options.baseDiv);
+            let placeholder = null;
+            if (this.options.shadowRoot) {
+                const shadowRoot = document.getElementById(this.options.shadowRoot)?.shadowRoot;
+                if (shadowRoot) {
+                    placeholder = shadowRoot.getElementById(this.options.baseDiv);
+                }
+            } else {
+                placeholder = document.getElementById(this.options.baseDiv);
+            }
             if (placeholder !== null) {
                 if (typeof window !== 'undefined') {
                     window.addEventListener('resize', () => {