fix: use Shadow DOM to avoid CSS conflicts (#13)

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>

popup/src/App.vue

@@ -76,4 +76,3 @@ const handleClickOperation = (offset: number) => {
   }
 }
 </script>
-./utils

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)

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'
-            }
           }
         ]
       }

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' }]
-    )
   }
 })