shadow dom

2026-06-06 03:34:40 +00:00 · 2024-03-31 07:36:20 +11:00
parent d94dd1ee12
commit 51cfb27fc5
6 changed files with 69 additions and 2 deletions
@@ -59,6 +59,7 @@
    "react-best-gradient-color-picker": "3.0.5",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.0",
+    "react-shadow": "^20.4.0",
    "rimraf": "^5.0.5",
    "sortablejs": "^1.15.2",
    "tailwindcss": "^3.4.1",
@@ -911,6 +911,11 @@ function addExtensionSettings() {
  extensionPopup.id = 'ExtensionPopup'
  document.body.appendChild(extensionPopup)

+  const extensionpopup2div = document.createElement('div')
+  extensionpopup2div.classList.add('ExtensionPopup2')
+  extensionpopup2div.id = 'ExtensionPopup2'
+  extensionPopup.appendChild(extensionpopup2div)
+
  const extensionIframe: HTMLIFrameElement = document.createElement('iframe')
  extensionIframe.src = `${browser.runtime.getURL(popup)}#settings/embedded`
  extensionIframe.id = 'ExtensionIframe'
@@ -17,8 +17,7 @@
    </style>
  </head>
  <body>
-    <div id="ExtensionPopup">
-    </div>
+    <div id="ExtensionPopup"></div>
    <script type="module" src="./main.tsx"></script>
    <script type="module" src="./dark.ts"></script>
  </body>
@@ -1,6 +1,7 @@
 import browser from 'webextension-polyfill';
 import { SettingsState } from '../../types/storage';
 import backgroundURL from './background/background.html?url'
+import { renderInShadowDom } from './otherFunction';

 export async function appendBackgroundToUI() {
  const settings = await browser.storage.local.get() as SettingsState;
@@ -16,4 +17,7 @@ export async function appendBackgroundToUI() {
  background.setAttribute('excludeDarkCheck', 'true');
  background.src = browser.runtime.getURL(backgroundURL);
  parent!.appendChild(background);
+
+
+  renderInShadowDom('#ExtensionPopup2')
 }
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
@@ -0,0 +1,41 @@
+import ReactDOM from 'react-dom/client';
+import root from 'react-shadow';
+import styles from './otherFunction.css?inline';
+
+// Define your React component
+export default function MyComponent() {
+
+  return (
+    <root.div>
+      <div className="bg-black/40 backdrop-blur-xl">hi there</div>
+      <style type="text/css">{styles}</style>
+    </root.div>
+  );
+};
+
+// Function to render the React component within Shadow DOM
+export const renderInShadowDom = (selector: string) => {
+  // Find the host element
+  const hostElement = document.querySelector(selector);
+  if (!hostElement) {
+    console.error('Host element not found');
+    return;
+  }
+
+  const element = document.createElement('div');
+  hostElement.appendChild(element);
+
+  const root = ReactDOM.createRoot(element);
+
+  root.render(<MyComponent />);
+};
+const hostElement = document.querySelector('nothing')!;
+
+if (hostElement) {
+  const element = document.createElement('div');
+  hostElement.appendChild(element);
+  
+  const root1 = ReactDOM.createRoot(element);
+  
+  root1.render(<MyComponent />);
+}