diff --git a/packages/sprotty/src/base/views/viewer-options.ts b/packages/sprotty/src/base/views/viewer-options.ts
index c36c74a..51ede5f 100644
--- a/packages/sprotty/src/base/views/viewer-options.ts
+++ b/packages/sprotty/src/base/views/viewer-options.ts
@@ -29,6 +29,8 @@ export interface ViewerOptions {
     /** CSS class added to the base element of the hidden rendering. */
     hiddenClass: string
     /** ID of the HTML element into which hover popup boxes are rendered. */
+    shadowRoot?: string
+    /** ID of the HTML element holding the shadow root. */
     popupDiv: string
     /** CSS class added to the base element of popup boxes. */
     popupClass: string
diff --git a/packages/sprotty/src/base/views/viewer.tsx b/packages/sprotty/src/base/views/viewer.tsx
index 32f6797..428ce4a 100644
--- 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', () => {