create shadow dom for content script

README.md

@@ -139,6 +139,8 @@ to use it in combination with Tailwind CSS. **Feel free to delete them**.
 
 Tailwind can be configured, themed and extended according to the [docs](https://tailwindcss.com/docs/theme).
 
+shadow dom is default enabled for content script. If you want to disable it, you can do it in `src/pages/content/index.tsx` by setting `enableShadowDome` to `false`.
+
 #### Internationalization (i18n)
 To enable internationalization set the `localize` flag in the `vite.config.base.ts` to `true`.
 

src/pages/content/index.tsx

@@ -1,20 +1,35 @@
-import { createRoot } from 'react-dom/client';
-import './style.css' 
-const div = document.createElement('div');
-div.id = '__root';
+import { createRoot } from "react-dom/client";
+import './style.css'; 
+
+// disable shadow dom if you want to affect your css styles to current page style
+// more on shadow dom: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
+const enableShadowDome = true;
+
+const div = document.createElement("div");
+const random = Math.random() * 10000;
+div.id = "__root_container_" + random;
 document.body.appendChild(div);
 
-const rootContainer = document.querySelector('#__root');
+let rootContainer : HTMLElement | ShadowRoot = div;
+
+if(enableShadowDome) {
+  const shadow = div.attachShadow({ mode: "open" });
+  rootContainer = shadow;
+  import('./shadowDomStyle').then(({ ImportShadowDomStyle }) => {
+    ImportShadowDomStyle(shadow);
+  });
+}
+
 if (!rootContainer) throw new Error("Can't find Content root element");
 const root = createRoot(rootContainer);
 root.render(
-  <div className='absolute bottom-0 left-0 text-lg text-black bg-amber-400 z-50'  >
-    content script <span className='your-class'>loaded</span>
+  <div className="absolute bottom-0 left-0 text-lg text-black bg-amber-400 z-50">
+    content script  <span className="your-class">loaded</span>
   </div>
 );
 
 try {
-  console.log('content script loaded');
+  console.log("content script loaded");
 } catch (e) {
   console.error(e);
 }

src/pages/content/shadowDomStyle.tsx

@@ -0,0 +1,7 @@
+import cssText from "src/pages/content/style.css?inline";
+
+export const ImportShadowDomStyle = (shadow: ShadowRoot) => {
+    const styleTag = document.createElement("style");
+    styleTag.textContent = cssText;
+    shadow.appendChild(styleTag);
+}