diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts
index 4f623b4b3fc..975b9da1f5f 100644
--- a/src/declarations/stencil-public-compiler.ts
+++ b/src/declarations/stencil-public-compiler.ts
@@ -957,10 +957,10 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
    */
   fullDocument?: boolean;
   /**
-   * Style mode to render the component in.
+   * Style modes to render the component in.
    * @see https://stenciljs.com/docs/styling#style-modes
    */
-  mode?: ResolutionHandler;
+  modes?: ResolutionHandler[];
 }
 
 export interface HydrateFactoryOptions extends SerializeDocumentOptions {
diff --git a/src/hydrate/runner/render.ts b/src/hydrate/runner/render.ts
index e25700a856e..920034388b6 100644
--- a/src/hydrate/runner/render.ts
+++ b/src/hydrate/runner/render.ts
@@ -135,13 +135,13 @@ async function render(win: MockWindow, opts: HydrateFactoryOptions, results: Hyd
   try {
     await Promise.resolve(beforeHydrateFn(win.document));
     return new Promise<HydrateResults>((resolve) => {
-      if (typeof opts.mode === 'function') {
+      if (Array.isArray(opts.modes)) {
         /**
          * Reset the mode resolution chain as we expect every `renderToString` call to render
          * the components in new environment/document.
          */
         modeResolutionChain.length = 0;
-        setMode(opts.mode);
+        opts.modes.forEach((mode) => setMode(mode));
       }
       return hydrateFactory(win, opts, results, afterHydrate, resolve);
     });
diff --git a/test/end-to-end/src/declarative-shadow-dom/test.e2e.ts b/test/end-to-end/src/declarative-shadow-dom/test.e2e.ts
index 49374cf28da..b3d1ef54a01 100644
--- a/test/end-to-end/src/declarative-shadow-dom/test.e2e.ts
+++ b/test/end-to-end/src/declarative-shadow-dom/test.e2e.ts
@@ -296,7 +296,7 @@ describe('renderToString', () => {
       const { html } = await renderToString('<prop-cmp first="Max" last="Mustermann"></prop-cmp>', {
         fullDocument: false,
         prettyHtml: true,
-        mode: () => 'ios',
+        modes: [() => 'ios'],
       });
       expect(html).toContain('<style>');
       expect(html).toContain(';color:white;');
@@ -310,7 +310,7 @@ describe('renderToString', () => {
       const { html } = await renderToString('<prop-cmp first="Max" last="Mustermann"></prop-cmp>', {
         fullDocument: false,
         prettyHtml: true,
-        mode: () => 'md',
+        modes: [() => 'md'],
       });
       expect(html).toContain(';color:black;');
       const page = await newE2EPage({ html, url: 'https://stencil.com' });