From 91fdf57d686783a993a3e312fec0b4054f5d1445 Mon Sep 17 00:00:00 2001 From: Guillaume Fontorbe Date: Wed, 21 Feb 2024 13:42:08 +0100 Subject: [PATCH] Add supports for shadow DOM Signed-off-by: Guillaume Fontorbe --- packages/sprotty/src/base/views/viewer-options.ts | 2 ++ packages/sprotty/src/base/views/viewer.tsx | 10 +++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/sprotty/src/base/views/viewer-options.ts b/packages/sprotty/src/base/views/viewer-options.ts index c36c74a3..51ede5f3 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 32f67970..428ce4a4 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', () => {