feat: improve dom application method

src/interface/components/Button.svelte

@@ -2,6 +2,6 @@
   let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
 </script>
 
-<button onclick={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
+<button onclick={onClick} class='px-14 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
   {text}
 </button>

src/interface/index.ts

@@ -1,25 +1,8 @@
 import "./index.css"
-import { mount } from "svelte"
-import type { ComponentType } from "svelte"
 import Settings from "./pages/settings.svelte"
 import IconFamily from '@/resources/fonts/IconFamily.woff'
 import browser from "webextension-polyfill"
-
-export default function renderSvelte(
-  Component: ComponentType | any,
-  mountPoint: ShadowRoot | HTMLElement,
-  props: Record<string, any> = {},
-) {
-  const app = mount(Component, {
-    target: mountPoint,
-    props: {
-      standalone: true,
-      ...props,
-    },
-  })
-
-  return app
-}
+import renderSvelte from "./main"
 
 function InjectCustomIcons() {
   console.info('[BetterSEQTA+] Injecting Icons')

src/interface/main.ts

@@ -1,7 +1,6 @@
-//import styles from "./index.css?inline"
 import { mount } from "svelte"
 import type { ComponentType } from "svelte"
-import './index.css'
+import style from './index.css?inline'
 
 export default function renderSvelte(
   Component: ComponentType | any,
@@ -16,5 +15,9 @@ export default function renderSvelte(
     },
   })
 
+  const styleElement = document.createElement('style')
+  styleElement.textContent = style
+  mountPoint.appendChild(styleElement)
+
   return app
 }

src/shadowDomUtils.ts

@@ -1,59 +0,0 @@
-const sheetsMap = new Map();
-export function updateStyle(id: string, content: string) {
-  let style = sheetsMap.get(id);
-  {
-    if (style && !(style instanceof HTMLStyleElement)) {
-      removeStyle(id);
-      style = undefined;
-    }
-    if (!style) {
-      style = document.createElement('style');
-      style.setAttribute('type', 'text/css');
-      style.innerHTML = content;
-      if (window.location.href.includes('chrome-extension://')) {
-        document.head.appendChild(style);
-      } else {
-        const root = document.getElementById('ExtensionPopup');
-
-        // if no root try again in a second
-        if (!root) {
-          setTimeout(() => updateStyle(id, content), 1000);
-          return;
-        }
-        const shadowEl = root?.shadowRoot;
-        shadowEl?.appendChild(style);
-      }
-    } else {
-      style.innerHTML = content;
-    }
-  }
-  sheetsMap.set(id, style);
-}
-
-export function removeStyle(id: string) {
-  const style = sheetsMap.get(id);
-  if (style) {
-    if (window.location.href.includes('chrome-extension://')) {
-      if (style instanceof CSSStyleSheet) {
-        (document as any).adoptedStyleSheets = (
-          document as any
-        ).adoptedStyleSheets.filter((s: any) => s !== style);
-      } else {
-        document.head.removeChild(style);
-      }
-    } else {
-      const root = document.getElementById('ExtensionPopup');
-      const shadowEl: any = root?.shadowRoot;
-      if (style instanceof CSSStyleSheet) {
-        if (shadowEl) {
-          shadowEl.adoptedStyleSheets = shadowEl.adoptedStyleSheets.filter(
-            (s: any) => s !== style,
-          );
-        }
-      } else if (shadowEl) {
-        shadowEl.removeChild(style);
-      }
-    }
-    sheetsMap.delete(id);
-  }
-}