diff --git a/package.json b/package.json
index 67715adce38..020065931bd 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,10 @@
     "sys/",
     "testing/"
   ],
+  "browser": {
+    "node:fs": false,
+    "node:path": false
+  },
   "exports": {
     ".": {
       "import": "./internal/stencil-core/index.js",
diff --git a/src/mock-doc/serialize-node.ts b/src/mock-doc/serialize-node.ts
index 677c37948da..f30a90d3687 100644
--- a/src/mock-doc/serialize-node.ts
+++ b/src/mock-doc/serialize-node.ts
@@ -1,3 +1,4 @@
+import { BUILD } from '@platform';
 import {
   CONTENT_REF_ID,
   HYDRATE_ID,
@@ -63,6 +64,7 @@ export function serializeNodeToHtml(elm: Node | MockNode, serializationOptions:
   };
 
   let renderedNode = '';
+
   const children =
     !opts.fullDocument && (elm as MockDocument).body
       ? Array.from((elm as MockDocument).body.childNodes)
@@ -70,6 +72,25 @@ export function serializeNodeToHtml(elm: Node | MockNode, serializationOptions:
         ? [elm]
         : Array.from(getChildNodes(elm));
 
+  // If we are not serializing the full document and we're not exclusively using declarative shadow dom
+  // we need to make sure we also include the style element for any components that are being hydrated
+  if (
+    !opts.fullDocument &&
+    (BUILD.scoped || (opts.serializeShadowRoot !== 'declarative-shadow-dom' && opts.serializeShadowRoot !== true))
+  ) {
+    for (let i = 0, ii = children.length; i < ii; i++) {
+      const child = children[i] as HTMLElement;
+      if (child.tagName) {
+        const styleTag = (elm as Element).querySelector(
+          `style[sty-id="sc-${(child as Element).tagName.toLowerCase()}"]`
+        );
+        if (styleTag) {
+          child.prepend(styleTag);
+        }
+      }
+    }
+  }
+
   for (let i = 0, ii = children.length; i < ii; i++) {
     const child = children[i];
     const chunks = Array.from(streamToHtml(child, opts, output));
diff --git a/src/utils/output-target.ts b/src/utils/output-target.ts
index 42e23aace50..c528579eb59 100644
--- a/src/utils/output-target.ts
+++ b/src/utils/output-target.ts
@@ -1,6 +1,6 @@
 import { flatOne, normalizePath, sortBy } from '@utils';
 import { join } from '@utils';
-import { basename, dirname, relative } from 'path';
+import { basename, dirname, relative } from 'node:path';
 
 import type * as d from '../declarations';
 import {
diff --git a/src/utils/path.ts b/src/utils/path.ts
index caff7ae5980..18e216c3d22 100644
--- a/src/utils/path.ts
+++ b/src/utils/path.ts
@@ -1,4 +1,4 @@
-import path from 'path';
+import path from 'node:path';
 
 /**
  * Convert Windows backslash paths to slash paths: foo\\bar ➔ foo/bar