Enhance: add a css insertion case to shadow dom (#313)

Jonghakseo · Dec 2, 2023 · 7aca5c6 · 7aca5c6
1 parent f170068
commit 7aca5c6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/pages/content/ui/index.tsx b/src/pages/content/ui/index.tsx
@@ -1,6 +1,7 @@
 import { createRoot } from 'react-dom/client';
 import App from '@pages/content/ui/app';
 import refreshOnUpdate from 'virtual:reload-on-update-in-view';
+import injectedStyle from './injected.css?inline';
 
 refreshOnUpdate('pages/content');
 
@@ -15,6 +16,11 @@ rootIntoShadow.id = 'shadow-root';
 const shadowRoot = root.attachShadow({ mode: 'open' });
 shadowRoot.appendChild(rootIntoShadow);
 
+/** Inject styles into shadow dom */
+const styleElement = document.createElement('style');
+styleElement.innerHTML = injectedStyle;
+shadowRoot.appendChild(styleElement);
+
 /**
  * https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/174
  *

diff --git a/src/pages/content/ui/injected.css b/src/pages/content/ui/injected.css