From 63b71d386bdf1287227f363eb6a4a8f2d73e4868 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Tue, 10 Dec 2024 19:00:10 -0300 Subject: [PATCH] Improve shadow-dom style handling --- .../plugin-css/common-style-loaders.ts | 24 ++++--------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/programs/develop/webpack/plugin-css/common-style-loaders.ts b/programs/develop/webpack/plugin-css/common-style-loaders.ts index 8c89b667..d5bf1346 100644 --- a/programs/develop/webpack/plugin-css/common-style-loaders.ts +++ b/programs/develop/webpack/plugin-css/common-style-loaders.ts @@ -28,40 +28,24 @@ function whereToInsertStyleTag(element: HTMLElement) { } } - // If the shadowRoot is already available, insert immediately + // If Shadow DOM exists, insert immediately // @ts-expect-error - global reference. if (window.__EXTENSION_SHADOW_ROOT__) { insertElement() return } - // Default behavior if MutationObserver is not required - if (!MutationObserver) { - document.head.appendChild(element) - return - } - - // Use MutationObserver to wait for the shadow root to be available + // Use a MutationObserver to wait for the Shadow DOM to be created const observer = new MutationObserver(() => { // @ts-expect-error - global reference. if (window.__EXTENSION_SHADOW_ROOT__) { insertElement() - observer.disconnect() // Stop observing once the shadow root is found + observer.disconnect() // Disconnect once the Shadow DOM is found } }) - // Observe changes to the `document.body` or `document.head` observer.observe(document.body, {childList: true, subtree: true}) - - // Set a timeout to fallback to `document.head` after 5 seconds - setTimeout(() => { - observer.disconnect() // Stop observing after timeout - // @ts-expect-error - global reference. - if (!window.__EXTENSION_SHADOW_ROOT__) { - document.head.appendChild(element) - console.log('Fallback: Element inserted into document.head after timeout') - } - }, 3000) + console.log('Observer waiting for Shadow DOM...') } export async function commonStyleLoaders(