From 6c77394860cfcaa92e99dfac8aecf9cd6414ee18 Mon Sep 17 00:00:00 2001 From: Guillaume Fontorbe Date: Wed, 21 Feb 2024 15:09:48 +0100 Subject: [PATCH] Add supports for shadow DOM (#435) * Add supports for shadow DOM Signed-off-by: Guillaume Fontorbe * Misplaced comment Signed-off-by: Guillaume Fontorbe --------- 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 62e588ff..01a411b0 100644 --- 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 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', () => {