diff --git a/playground/vite/index.html b/playground/vite/index.html
index c7ed8c7..d68f3ca 100644
--- a/playground/vite/index.html
+++ b/playground/vite/index.html
@@ -13,6 +13,7 @@
       style="text-decoration: none; margin-top: 10px; display: block"
       >You can use right panel to control your layout image.</a
     >
+    <button>style test</button>
     <script type="module" src="./main.ts"></script>
   </body>
 </html>
diff --git a/popup/src/App.vue b/popup/src/App.vue
index 460fb34..baad386 100644
--- a/popup/src/App.vue
+++ b/popup/src/App.vue
@@ -76,4 +76,3 @@ const handleClickOperation = (offset: number) => {
   }
 }
 </script>
-./utils
diff --git a/popup/src/main.ts b/popup/src/main.ts
index 7e6b38a..e9cfbdf 100644
--- a/popup/src/main.ts
+++ b/popup/src/main.ts
@@ -3,21 +3,34 @@ import type { Component } from 'vue'
 
 import App from './App.vue'
 
-import './index.css'
+import styles from './index.css?inline'
 
 function createDevToolsContainer(App: Component) {
+  // Plugin root div
   const CONTAINER_ID = '__vue-overlay-layout__'
   const el = document.createElement('div')
   el.setAttribute('id', CONTAINER_ID)
   el.setAttribute('data-v-inspector-ignore', 'true')
+
+  // Use Shadow DOM to avoid CSS conflicts
+  const shadowRoot = el.attachShadow({ mode: 'open' })
+  const styleEl = document.createElement('style')
+  styleEl.textContent = styles
+  shadowRoot.appendChild(styleEl)
+
+  const contentEl = document.createElement('div')
+  contentEl.setAttribute('id', 'shadow-root-content')
+  shadowRoot.appendChild(contentEl)
+
   document.getElementsByTagName('body')[0].appendChild(el)
+
   const app = createApp({
     render: () => h(App),
     devtools: {
       hide: true
     }
   })
-  app.mount(el)
+  app.mount(contentEl)
 }
 
 createDevToolsContainer(App)
diff --git a/src/index.ts b/src/index.ts
index a558d4b..4770924 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -32,14 +32,6 @@ export const unpluginFactory: UnpluginFactory<Options | undefined> = (
               type: 'module',
               src: '/__OVERLAY_LAYOUT__/overlay-layout.js'
             }
-          },
-          {
-            tag: 'link',
-            injectTo: 'head',
-            attrs: {
-              rel: 'stylesheet',
-              href: '/__OVERLAY_LAYOUT__/overlay-layout.css'
-            }
           }
         ]
       }
diff --git a/src/nuxt.ts b/src/nuxt.ts
index 5af2e97..7c286a4 100644
--- a/src/nuxt.ts
+++ b/src/nuxt.ts
@@ -47,9 +47,5 @@ export default defineNuxtModule<ModuleOptions>({
         }
       ]
     )
-
-    nuxt.options.app.head.link.push(
-      ...[{ rel: 'stylesheet', href: '/__OVERLAY_LAYOUT__/overlay-layout.css' }]
-    )
   }
 })