diff --git a/examples/content-css-modules/content/scripts.js b/examples/content-css-modules/content/scripts.js
index c35ecdbbb..d78a17777 100644
--- a/examples/content-css-modules/content/scripts.js
+++ b/examples/content-css-modules/content/scripts.js
@@ -9,25 +9,21 @@ setTimeout(initial, 1000)
 function initial() {
   const rootDiv = document.createElement('div')
   rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
 
   // Injecting content_scripts inside a shadow dom
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
 
-  // Tell Extension.js to use the shadow root as the root element
-  // to inject styles into.
-  // @ts-exspect-error - Ignore TS error for global variable
-  window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
-
-  document.body.appendChild(rootDiv)
-
-  const shadowDomContainer = document.createElement('div')
-  shadowDomContainer.id = 'extension-shadow-dom-container'
-
-  shadowRoot.appendChild(shadowDomContainer)
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
 
-  shadowDomContainer.innerHTML = `
+  shadowRoot.innerHTML = `
     <div class="content_script">
       <img class=${styles.content_logo} src="${logo}" />
       <h1 class="content_title">
diff --git a/examples/content-css-modules/content/styles.css b/examples/content-css-modules/content/styles.css
index 14a840f96..9147e30ff 100644
--- a/examples/content-css-modules/content/styles.css
+++ b/examples/content-css-modules/content/styles.css
@@ -20,14 +20,17 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   font-weight: 700;
+  margin: 0;
 }
 
 .content_description {
   font-size: small;
+  margin: 0;
 }
 
 .content_description a {
   text-decoration: none;
   border-bottom: 2px solid #c9c9c9;
   color: #e5e7eb;
+  margin: 0;
 }
diff --git a/examples/content-env/content/scripts.ts b/examples/content-env/content/scripts.ts
index 51a1f081a..d5d70c88c 100644
--- a/examples/content-env/content/scripts.ts
+++ b/examples/content-env/content/scripts.ts
@@ -11,25 +11,21 @@ setTimeout(initial, 1000)
 function initial() {
   const rootDiv = document.createElement('div')
   rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
 
   // Injecting content_scripts inside a shadow dom
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
 
-  // Tell Extension.js to use the shadow root as the root element
-  // to inject styles into.
-  // @ts-exspect-error - Ignore TS error for global variable
-  window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
-
-  document.body.appendChild(rootDiv)
-
-  const shadowDomContainer = document.createElement('div')
-  shadowDomContainer.id = 'extension-shadow-dom-container'
-
-  shadowRoot.appendChild(shadowDomContainer)
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
 
-  shadowDomContainer.innerHTML = `
+  shadowRoot.innerHTML = `
     <div class="content_script">
       <img class="content_logo" src="${logo}" />
       <p class="content_description">${process.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT}</p>
diff --git a/examples/content-env/content/styles.css b/examples/content-env/content/styles.css
index 2049a65cc..1f69e11c2 100644
--- a/examples/content-env/content/styles.css
+++ b/examples/content-env/content/styles.css
@@ -24,14 +24,17 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   font-weight: 700;
+  margin: 0;
 }
 
 .content_description {
   font-size: small;
+  margin: 0;
 }
 
 .content_description a {
   text-decoration: none;
   border-bottom: 2px solid #c9c9c9;
   color: #e5e7eb;
+  margin: 0;
 }
diff --git a/examples/content-esm/content/scripts.mjs b/examples/content-esm/content/scripts.mjs
index 05fef2f54..e23ffad50 100644
--- a/examples/content-esm/content/scripts.mjs
+++ b/examples/content-esm/content/scripts.mjs
@@ -8,23 +8,19 @@ setTimeout(initial, 1000)
 function initial() {
   const rootDiv = document.createElement('div')
   rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
 
   // Injecting content_scripts inside a shadow dom
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
 
-  // Tell Extension.js to use the shadow root as the root element
-  // to inject styles into.
-  // @ts-exspect-error - Ignore TS error for global variable
-  window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
-
-  document.body.appendChild(rootDiv)
-
-  const shadowDomContainer = document.createElement('div')
-  shadowDomContainer.id = 'extension-shadow-dom-container'
-
-  shadowRoot.appendChild(shadowDomContainer)
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
 
-  shadowDomContainer.innerHTML = contentComponent
+  shadowRoot.innerHTML = contentComponent
 }
diff --git a/examples/content-esm/content/styles.css b/examples/content-esm/content/styles.css
index 2049a65cc..1f69e11c2 100644
--- a/examples/content-esm/content/styles.css
+++ b/examples/content-esm/content/styles.css
@@ -24,14 +24,17 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   font-weight: 700;
+  margin: 0;
 }
 
 .content_description {
   font-size: small;
+  margin: 0;
 }
 
 .content_description a {
   text-decoration: none;
   border-bottom: 2px solid #c9c9c9;
   color: #e5e7eb;
+  margin: 0;
 }
diff --git a/examples/content-extension-config/content/scripts.tsx b/examples/content-extension-config/content/scripts.tsx
index 89050dc3b..db42e162a 100644
--- a/examples/content-extension-config/content/scripts.tsx
+++ b/examples/content-extension-config/content/scripts.tsx
@@ -10,8 +10,22 @@ function initial() {
   rootDiv.id = 'extension-root'
   document.body.appendChild(rootDiv)
 
-  // Use `createRoot` to create a root, then render the <App /> component
-  // Note that `createRoot` takes the container DOM node, not the React element
-  const root = ReactDOM.createRoot(rootDiv)
-  root.render(<ContentApp />)
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  const root = ReactDOM.createRoot(shadowRoot)
+  root.render(
+    <div className="content_script">
+      <ContentApp />
+    </div>
+  )
 }
diff --git a/examples/content-extension-config/content/styles.css b/examples/content-extension-config/content/styles.css
index dc79ebb52..c0fc3552e 100644
--- a/examples/content-extension-config/content/styles.css
+++ b/examples/content-extension-config/content/styles.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-#extension-root {
+.content_script {
   position: fixed;
   bottom: 0;
   right: 0;
diff --git a/examples/content-less-modules/content/scripts.js b/examples/content-less-modules/content/scripts.js
index 5f264c50b..63bd97326 100644
--- a/examples/content-less-modules/content/scripts.js
+++ b/examples/content-less-modules/content/scripts.js
@@ -4,20 +4,40 @@ import logo from '../images/logo.svg'
 
 console.log('hello from content_scripts')
 
-document.body.innerHTML += `
-<div class="content_script">
-  <img class="${styles.logo}" src="${logo}" />
-  <h1 class="content_title">
-    Welcome to your LESS Modules Extension
-  </h1>
-  <p class="content_description">
-    Learn more about creating cross-browser extensions at <a
-      className="underline hover:no-underline"
-      href="https://extension.js.org"
-      target="_blank"
-    >
-    https://extension.js.org
-    </a>
-  </p>
-</div>
-`
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = `
+  <div class="content_script">
+    <img class="${styles.logo}" src="${logo}" />
+    <h1 class="content_title">
+      Welcome to your LESS Modules Extension
+    </h1>
+    <p class="content_description">
+      Learn more about creating cross-browser extensions at <a
+        className="underline hover:no-underline"
+        href="https://extension.js.org"
+        target="_blank"
+      >
+      https://extension.js.org
+      </a>
+    </p>
+  </div>
+  `
+}
diff --git a/examples/content-less-modules/content/styles.less b/examples/content-less-modules/content/styles.less
index d1548afe9..35586168b 100644
--- a/examples/content-less-modules/content/styles.less
+++ b/examples/content-less-modules/content/styles.less
@@ -24,14 +24,17 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   font-weight: 700;
+  margin: 0;
 }
 
 .content_description {
   font-size: small;
+  margin: 0;
 }
 
 .content_description a {
   text-decoration: none;
   border-bottom: 2px solid #c9c9c9;
   color: #e5e7eb;
+  margin: 0;
 }
\ No newline at end of file
diff --git a/examples/content-less/content/scripts.js b/examples/content-less/content/scripts.js
index 5adca5860..c678dcde7 100644
--- a/examples/content-less/content/scripts.js
+++ b/examples/content-less/content/scripts.js
@@ -3,20 +3,40 @@ import logo from '../images/logo.svg'
 
 console.log('hello from content_scripts')
 
-document.body.innerHTML += `
-<div class="content_script">
-  <img class="content_logo" src="${logo}" />
-  <h1 class="content_title">
-    Welcome to your LESS Extension
-  </h1>
-  <p class="content_description">
-    Learn more about creating cross-browser extensions at <a
-      className="underline hover:no-underline"
-      href="https://extension.js.org"
-      target="_blank"
-    >
-    https://extension.js.org
-    </a>
-  </p>
-</div>
-`
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = `
+    <div class="content_script">
+      <img class="content_logo" src="${logo}" />
+      <h1 class="content_title">
+        Welcome to your LESS Extension
+      </h1>
+      <p class="content_description">
+        Learn more about creating cross-browser extensions at <a
+          className="underline hover:no-underline"
+          href="https://extension.js.org"
+          target="_blank"
+        >
+        https://extension.js.org
+        </a>
+      </p>
+    </div>
+  `
+}
diff --git a/examples/content-less/content/styles.less b/examples/content-less/content/styles.less
index d1548afe9..35586168b 100644
--- a/examples/content-less/content/styles.less
+++ b/examples/content-less/content/styles.less
@@ -24,14 +24,17 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   font-weight: 700;
+  margin: 0;
 }
 
 .content_description {
   font-size: small;
+  margin: 0;
 }
 
 .content_description a {
   text-decoration: none;
   border-bottom: 2px solid #c9c9c9;
   color: #e5e7eb;
+  margin: 0;
 }
\ No newline at end of file
diff --git a/examples/content-main-world/content/scripts.js b/examples/content-main-world/content/scripts.js
index da28aa769..d526c54dd 100644
--- a/examples/content-main-world/content/scripts.js
+++ b/examples/content-main-world/content/scripts.js
@@ -1,20 +1,42 @@
 import './styles.css'
 import logo from '../images/extension.svg'
 
-document.body.innerHTML += `
-<div class="content_script">
-  <img class="content_logo" src="${logo}" />
-  <h1 class="content_title">
-    Main World
-  </h1>
-  <p class="content_description">
-    Learn more about creating cross-browser extensions at <a
-      className="underline hover:no-underline"
-      href="https://extension.js.org"
-      target="_blank"
-    >
-    https://extension.js.org
-    </a>
-  </p>
-</div>
-`
+console.log('hello from content_scripts')
+
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = `
+    <div class="content_script">
+      <img class="content_logo" src="${logo}" />
+      <h1 class="content_title">
+        Main World
+      </h1>
+      <p class="content_description">
+        Learn more about creating cross-browser extensions at <a
+          className="underline hover:no-underline"
+          href="https://extension.js.org"
+          target="_blank"
+        >
+        https://extension.js.org
+        </a>
+      </p>
+    </div>
+  `
+}
diff --git a/examples/content-main-world/content/styles.css b/examples/content-main-world/content/styles.css
index 2049a65cc..1f69e11c2 100644
--- a/examples/content-main-world/content/styles.css
+++ b/examples/content-main-world/content/styles.css
@@ -24,14 +24,17 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   font-weight: 700;
+  margin: 0;
 }
 
 .content_description {
   font-size: small;
+  margin: 0;
 }
 
 .content_description a {
   text-decoration: none;
   border-bottom: 2px solid #c9c9c9;
   color: #e5e7eb;
+  margin: 0;
 }
diff --git a/examples/content-preact/content/scripts.tsx b/examples/content-preact/content/scripts.tsx
index bed0b7438..ca70ed590 100644
--- a/examples/content-preact/content/scripts.tsx
+++ b/examples/content-preact/content/scripts.tsx
@@ -10,5 +10,22 @@ function initial() {
   rootDiv.id = 'extension-root'
   document.body.appendChild(rootDiv)
 
-  render(<ContentApp />, rootDiv)
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  render(
+    <div className="content_script">
+      <ContentApp />
+    </div>,
+    shadowRoot
+  )
 }
diff --git a/examples/content-preact/content/styles.css b/examples/content-preact/content/styles.css
index dc79ebb52..c0fc3552e 100644
--- a/examples/content-preact/content/styles.css
+++ b/examples/content-preact/content/styles.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-#extension-root {
+.content_script {
   position: fixed;
   bottom: 0;
   right: 0;
diff --git a/examples/content-react-svgr/content/scripts.tsx b/examples/content-react-svgr/content/scripts.tsx
index 89050dc3b..db42e162a 100644
--- a/examples/content-react-svgr/content/scripts.tsx
+++ b/examples/content-react-svgr/content/scripts.tsx
@@ -10,8 +10,22 @@ function initial() {
   rootDiv.id = 'extension-root'
   document.body.appendChild(rootDiv)
 
-  // Use `createRoot` to create a root, then render the <App /> component
-  // Note that `createRoot` takes the container DOM node, not the React element
-  const root = ReactDOM.createRoot(rootDiv)
-  root.render(<ContentApp />)
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  const root = ReactDOM.createRoot(shadowRoot)
+  root.render(
+    <div className="content_script">
+      <ContentApp />
+    </div>
+  )
 }
diff --git a/examples/content-react-svgr/content/styles.css b/examples/content-react-svgr/content/styles.css
index dc79ebb52..c0fc3552e 100644
--- a/examples/content-react-svgr/content/styles.css
+++ b/examples/content-react-svgr/content/styles.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-#extension-root {
+.content_script {
   position: fixed;
   bottom: 0;
   right: 0;
diff --git a/examples/content-react/content/scripts.tsx b/examples/content-react/content/scripts.tsx
index 89050dc3b..db42e162a 100644
--- a/examples/content-react/content/scripts.tsx
+++ b/examples/content-react/content/scripts.tsx
@@ -10,8 +10,22 @@ function initial() {
   rootDiv.id = 'extension-root'
   document.body.appendChild(rootDiv)
 
-  // Use `createRoot` to create a root, then render the <App /> component
-  // Note that `createRoot` takes the container DOM node, not the React element
-  const root = ReactDOM.createRoot(rootDiv)
-  root.render(<ContentApp />)
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  const root = ReactDOM.createRoot(shadowRoot)
+  root.render(
+    <div className="content_script">
+      <ContentApp />
+    </div>
+  )
 }
diff --git a/examples/content-react/content/styles.css b/examples/content-react/content/styles.css
index dc79ebb52..c0fc3552e 100644
--- a/examples/content-react/content/styles.css
+++ b/examples/content-react/content/styles.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-#extension-root {
+.content_script {
   position: fixed;
   bottom: 0;
   right: 0;
diff --git a/examples/content-sass-modules/content/scripts.js b/examples/content-sass-modules/content/scripts.js
index 1c9f6a5c5..e530bda7b 100644
--- a/examples/content-sass-modules/content/scripts.js
+++ b/examples/content-sass-modules/content/scripts.js
@@ -4,20 +4,40 @@ import logo from '../images/logo.svg'
 
 console.log('hello from content_scripts')
 
-document.body.innerHTML += `
-<div class="content_script">
-  <img class="${styles.logo}" src="${logo}" />
-  <h1 class="content_title">
-    Welcome to your Sass Modules Extension
-  </h1>
-  <p class="content_description">
-    Learn more about creating cross-browser extensions at <a
-      className="underline hover:no-underline"
-      href="https://extension.js.org"
-      target="_blank"
-    >
-    https://extension.js.org
-    </a>
-  </p>
-</div>
-`
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = `
+    <div class="content_script">
+      <img class="${styles.logo}" src="${logo}" />
+      <h1 class="content_title">
+        Welcome to your Sass Modules Extension
+      </h1>
+      <p class="content_description">
+        Learn more about creating cross-browser extensions at <a
+          className="underline hover:no-underline"
+          href="https://extension.js.org"
+          target="_blank"
+        >
+        https://extension.js.org
+        </a>
+      </p>
+    </div>
+  `
+}
diff --git a/examples/content-sass-modules/content/styles.scss b/examples/content-sass-modules/content/styles.scss
index d1548afe9..35586168b 100644
--- a/examples/content-sass-modules/content/styles.scss
+++ b/examples/content-sass-modules/content/styles.scss
@@ -24,14 +24,17 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   font-weight: 700;
+  margin: 0;
 }
 
 .content_description {
   font-size: small;
+  margin: 0;
 }
 
 .content_description a {
   text-decoration: none;
   border-bottom: 2px solid #c9c9c9;
   color: #e5e7eb;
+  margin: 0;
 }
\ No newline at end of file
diff --git a/examples/content-sass/content/scripts.js b/examples/content-sass/content/scripts.js
index 6c6f8a75a..088799bf3 100644
--- a/examples/content-sass/content/scripts.js
+++ b/examples/content-sass/content/scripts.js
@@ -3,21 +3,40 @@ import logo from '../images/logo.svg'
 
 console.log('hello from content_scripts')
 
-// Check if the content has already been added
-document.body.innerHTML += `
-<div class="content_script">
-  <img class="content_logo" src="${logo}" />
-  <h1 class="content_title">
-    Welcome to your Sass Extension
-  </h1>
-  <p class="content_description">
-    Learn more about creating cross-browser extensions at <a
-      className="underline hover:no-underline"
-      href="https://extension.js.org"
-      target="_blank"
-    >
-    https://extension.js.org
-    </a>
-  </p>
-</div>
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = `
+    <div class="content_script">
+      <img class="content_logo" src="${logo}" />
+      <h1 class="content_title">
+        Welcome to your Sass Extension
+      </h1>
+      <p class="content_description">
+        Learn more about creating cross-browser extensions at <a
+          className="underline hover:no-underline"
+          href="https://extension.js.org"
+          target="_blank"
+        >
+        https://extension.js.org
+        </a>
+      </p>
+    </div>
   `
+}
diff --git a/examples/content-sass/content/styles.scss b/examples/content-sass/content/styles.scss
index d1548afe9..35586168b 100644
--- a/examples/content-sass/content/styles.scss
+++ b/examples/content-sass/content/styles.scss
@@ -24,14 +24,17 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   font-weight: 700;
+  margin: 0;
 }
 
 .content_description {
   font-size: small;
+  margin: 0;
 }
 
 .content_description a {
   text-decoration: none;
   border-bottom: 2px solid #c9c9c9;
   color: #e5e7eb;
+  margin: 0;
 }
\ No newline at end of file
diff --git a/examples/content-tailwind/content/scripts.js b/examples/content-tailwind/content/scripts.js
index f833746ff..d3847bed0 100644
--- a/examples/content-tailwind/content/scripts.js
+++ b/examples/content-tailwind/content/scripts.js
@@ -3,4 +3,28 @@ import {getContentHtml} from './content'
 
 console.log('hello from content_scripts')
 
-document.body.innerHTML += `<div id="extension-root">${getContentHtml()}</div>`
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  shadowRoot.innerHTML = `
+    <div class="content_script">
+      ${getContentHtml()}
+    </div>
+  `
+}
diff --git a/examples/content-tailwind/content/styles.css b/examples/content-tailwind/content/styles.css
index dc79ebb52..c0fc3552e 100644
--- a/examples/content-tailwind/content/styles.css
+++ b/examples/content-tailwind/content/styles.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-#extension-root {
+.content_script {
   position: fixed;
   bottom: 0;
   right: 0;
diff --git a/examples/content-typescript/content/scripts.ts b/examples/content-typescript/content/scripts.ts
index 139825c35..ba8d6a9bc 100644
--- a/examples/content-typescript/content/scripts.ts
+++ b/examples/content-typescript/content/scripts.ts
@@ -3,20 +3,39 @@ import logo from '../images/logo.svg'
 
 console.log('hello from content_scripts')
 
-document.body.innerHTML += `
-<div class="content_script">
-  <img class="content_logo" src="${logo}" />
-  <h1 class="content_title">
-    Welcome to your TypeScript Extension
-  </h1>
-  <p class="content_description">
-    Learn more about creating cross-browser extensions at <a
-      className="underline hover:no-underline"
-      href="https://extension.js.org"
-      target="_blank"
-    >
-    https://extension.js.org
-    </a>
-  </p>
-</div>
-`
+setTimeout(initial, 1000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  // Tell Extension.js to use the shadow root as the root element
+  // to inject styles into.
+  // @ts-exspect-error - Ignore TS error for global variable
+  window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+
+  document.body.appendChild(rootDiv)
+
+  shadowRoot.innerHTML = `
+    <div class="content_script">
+      <img class="content_logo" src="${logo}" />
+      <h1 class="content_title">
+        Welcome to your TypeScript Extension
+      </h1>
+      <p class="content_description">
+        Learn more about creating cross-browser extensions at <a
+          className="underline hover:no-underline"
+          href="https://extension.js.org"
+          target="_blank"
+        >
+        https://extension.js.org
+        </a>
+      </p>
+    </div>
+  `
+}
diff --git a/examples/content-typescript/content/styles.css b/examples/content-typescript/content/styles.css
index 2049a65cc..1f69e11c2 100644
--- a/examples/content-typescript/content/styles.css
+++ b/examples/content-typescript/content/styles.css
@@ -24,14 +24,17 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   font-weight: 700;
+  margin: 0;
 }
 
 .content_description {
   font-size: small;
+  margin: 0;
 }
 
 .content_description a {
   text-decoration: none;
   border-bottom: 2px solid #c9c9c9;
   color: #e5e7eb;
+  margin: 0;
 }
diff --git a/examples/content-vue/content/scripts.ts b/examples/content-vue/content/scripts.ts
index bbee32a88..c04100373 100644
--- a/examples/content-vue/content/scripts.ts
+++ b/examples/content-vue/content/scripts.ts
@@ -3,11 +3,30 @@ import ContentApp from './ContentApp.vue'
 import './styles.css'
 
 function initial() {
+  // Create a new div element and append it to the document's body
   const rootDiv = document.createElement('div')
   rootDiv.id = 'extension-root'
   document.body.appendChild(rootDiv)
 
-  createApp(ContentApp).mount(rootDiv)
+  // Inject content_scripts inside a shadow DOM
+  // to prevent conflicts with the host page's styles.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js to use the shadow root
+    // as the root element for injecting styles.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
+
+  // Create a container inside the shadow DOM for the Vue app
+  const shadowAppContainer = document.createElement('div')
+  shadowAppContainer.className = 'content_script'
+  shadowRoot.appendChild(shadowAppContainer)
+
+  // Mount the Vue app to the container inside the shadow DOM
+  const app = createApp(ContentApp)
+  app.mount(shadowAppContainer)
 }
 
+// Initialize the app
 setTimeout(initial, 1000)
diff --git a/examples/content-vue/content/styles.css b/examples/content-vue/content/styles.css
index dc79ebb52..c0fc3552e 100644
--- a/examples/content-vue/content/styles.css
+++ b/examples/content-vue/content/styles.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-#extension-root {
+.content_script {
   position: fixed;
   bottom: 0;
   right: 0;
diff --git a/examples/content/content/scripts.js b/examples/content/content/scripts.js
index abba73a7e..afd74f4c9 100644
--- a/examples/content/content/scripts.js
+++ b/examples/content/content/scripts.js
@@ -8,25 +8,21 @@ setTimeout(initial, 1000)
 function initial() {
   const rootDiv = document.createElement('div')
   rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
 
   // Injecting content_scripts inside a shadow dom
   // prevents conflicts with the host page's styles.
   // This way, styles from the extension won't leak into the host page.
   const shadowRoot = rootDiv.attachShadow({mode: 'open'})
 
-  // Tell Extension.js to use the shadow root as the root element
-  // to inject styles into.
-  // @ts-exspect-error - Ignore TS error for global variable
-  window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
-
-  document.body.appendChild(rootDiv)
-
-  const shadowDomContainer = document.createElement('div')
-  shadowDomContainer.id = 'extension-shadow-dom-container'
-
-  shadowRoot.appendChild(shadowDomContainer)
+  if (process.env.EXTENSION_MODE === 'development') {
+    // @ts-expect-error - Tell Extension.js
+    // to use the shadow root as the root element
+    // to inject styles into.
+    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
+  }
 
-  shadowDomContainer.innerHTML = `
+  shadowRoot.innerHTML = `
     <div class="content_script">
       <img class="content_logo" src="${logo}" />
       <h1 class="content_title">
diff --git a/examples/content/content/styles.css b/examples/content/content/styles.css
index 2049a65cc..1f69e11c2 100644
--- a/examples/content/content/styles.css
+++ b/examples/content/content/styles.css
@@ -24,14 +24,17 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   font-weight: 700;
+  margin: 0;
 }
 
 .content_description {
   font-size: small;
+  margin: 0;
 }
 
 .content_description a {
   text-decoration: none;
   border-bottom: 2px solid #c9c9c9;
   color: #e5e7eb;
+  margin: 0;
 }