From b91f42e924d13da66e8689f230983e0e98c72c9f Mon Sep 17 00:00:00 2001
From: John Hefferman <jhefferman@salesforce.com>
Date: Thu, 31 Jul 2025 12:32:06 -0600
Subject: [PATCH 1/4] fix: dudupe light scoped issue, hydration coverage

---
 .../dynamic/expected.html                     | 34 +++++-----
 .../static/expected.html                      | 18 +++---
 .../with-scoped-styles/dynamic/expected.html  | 64 +++++++++----------
 .../with-scoped-styles/static/expected.html   | 18 +++---
 .../integration-karma/helpers/test-hydrate.js |  3 +
 .../scripts/karma-configs/hydration/base.js   |  4 +-
 .../scripts/karma-plugins/hydration-tests.js  | 11 +++-
 .../karma-plugins/transform-framework.js      |  2 +
 .../child-scoped-styles/index.spec.js         | 21 ++----
 .../child-scoped-styles/x/child/child.html    |  2 +-
 .../x/child/child.scoped.css                  |  4 +-
 .../child-scoped-styles/x/main/main.html      |  1 +
 packages/@lwc/ssr-client-utils/src/index.ts   | 11 ++++
 packages/@lwc/ssr-runtime/src/styles.ts       |  3 +-
 packages/@lwc/template-compiler/README.md     |  1 +
 .../test-utils/swap-lwc-style-for-style.ts    |  3 +-
 16 files changed, 110 insertions(+), 90 deletions(-)

diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html
index ce2037c3a3..9c410df499 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html
@@ -17,7 +17,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -29,7 +29,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -41,7 +41,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -53,7 +53,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -65,7 +65,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -77,7 +77,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -89,7 +89,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -101,7 +101,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -113,7 +113,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -125,7 +125,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="bar foo lwc-5h3d35cke7v">
         </div>
@@ -137,7 +137,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="baz foo lwc-5h3d35cke7v">
         </div>
@@ -149,7 +149,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="bar foo lwc-5h3d35cke7v">
         </div>
@@ -161,7 +161,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="bar foo lwc-5h3d35cke7v">
         </div>
@@ -173,7 +173,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="BaR FOO lwc-5h3d35cke7v">
         </div>
@@ -185,7 +185,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="foo lwc-5h3d35cke7v">
         </div>
@@ -197,7 +197,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="foo lwc-5h3d35cke7v">
         </div>
@@ -209,7 +209,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="&quot;'<&amp; lwc-5h3d35cke7v">
         </div>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/static/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/static/expected.html
index cab0de7c37..9031b13e0a 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/static/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/static/expected.html
@@ -13,7 +13,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -21,7 +21,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -29,7 +29,7 @@
     </x-child>
     <x-child class="foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -37,7 +37,7 @@
     </x-child>
     <x-child class="foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -45,7 +45,7 @@
     </x-child>
     <x-child class="bar foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -53,7 +53,7 @@
     </x-child>
     <x-child class="bar foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -61,7 +61,7 @@
     </x-child>
     <x-child class="BAR BaZ FoA lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -69,7 +69,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host tabs" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
@@ -77,7 +77,7 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host newlines" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--0">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--0">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles/dynamic/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles/dynamic/expected.html
index 2d2fe174c0..ab4c66fc72 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles/dynamic/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles/dynamic/expected.html
@@ -27,13 +27,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -41,13 +41,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -55,13 +55,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -69,13 +69,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -83,13 +83,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -97,13 +97,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -111,13 +111,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -125,13 +125,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -139,13 +139,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -153,13 +153,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="bar foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="bar foo lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -167,13 +167,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="baz foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="baz foo lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -181,13 +181,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="bar foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="bar foo lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -195,13 +195,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="bar foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="bar foo lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -209,13 +209,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="BaR FOO lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="BaR FOO lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -223,13 +223,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="foo lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
@@ -237,13 +237,13 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
         <div class="foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="foo lwc-42b236sbaik-host lwc-5h3d35cke7v" data-lwc-host-scope-token="lwc-42b236sbaik-host">
           <template shadowrootmode="open">
-            <lwc-style style-id="lwc-style--2">
+            <lwc-style class="lwc-42b236sbaik" style-id="lwc-style--2">
             </lwc-style>
           </template>
         </x-grandchild>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles/static/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles/static/expected.html
index 7e9e5c654e..b7c8d32b85 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles/static/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles/static/expected.html
@@ -16,55 +16,55 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
       </template>
     </x-child>
     <x-child class="foo lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
       </template>
     </x-child>
     <x-child class="foo lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
       </template>
     </x-child>
     <x-child class="bar foo lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
       </template>
     </x-child>
     <x-child class="bar foo lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
       </template>
     </x-child>
     <x-child class="BAR BaZ FoA lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761 tabs" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761 newlines" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <lwc-style style-id="lwc-style--1">
+        <lwc-style class="lwc-5h3d35cke7v" style-id="lwc-style--1">
         </lwc-style>
       </template>
     </x-child>
diff --git a/packages/@lwc/integration-karma/helpers/test-hydrate.js b/packages/@lwc/integration-karma/helpers/test-hydrate.js
index c9e7bdd492..a28f8e72d0 100644
--- a/packages/@lwc/integration-karma/helpers/test-hydrate.js
+++ b/packages/@lwc/integration-karma/helpers/test-hydrate.js
@@ -10,6 +10,8 @@ window.HydrateTest = (function (lwc, testUtils) {
         sanitizeHtmlContent: (content) => content,
     });
 
+    window.LwcSsrClientUtils.registerLwcStyleComponent();
+
     function parseStringToDom(html) {
         return Document.parseHTMLUnsafe(html).body.firstChild;
     }
@@ -31,6 +33,7 @@ window.HydrateTest = (function (lwc, testUtils) {
     }
 
     function runTest(ssrRendered, Component, testConfig) {
+        window.LwcSsrClientUtils.clearStylesheetCache();
         const container = appendTestTarget(ssrRendered);
         const selector = container.firstChild.tagName.toLowerCase();
         let target = container.querySelector(selector);
diff --git a/packages/@lwc/integration-karma/scripts/karma-configs/hydration/base.js b/packages/@lwc/integration-karma/scripts/karma-configs/hydration/base.js
index b4316eb0cc..2109126880 100644
--- a/packages/@lwc/integration-karma/scripts/karma-configs/hydration/base.js
+++ b/packages/@lwc/integration-karma/scripts/karma-configs/hydration/base.js
@@ -23,12 +23,13 @@ const COVERAGE_DIR = path.resolve(__dirname, '../../../coverage');
 
 const SYNTHETIC_SHADOW = require.resolve('@lwc/synthetic-shadow/dist/index.js');
 const LWC_ENGINE = require.resolve('@lwc/engine-dom/dist/index.js');
+const SSR_CLIENT_UTILS = require.resolve('@lwc/ssr-client-utils/dist/index.js');
 
 const TEST_UTILS = require.resolve('../../../helpers/test-utils');
 const TEST_SETUP = require.resolve('../../../helpers/test-setup');
 const TEST_HYDRATE = require.resolve('../../../helpers/test-hydrate');
 
-const ALL_FRAMEWORK_FILES = [SYNTHETIC_SHADOW, LWC_ENGINE];
+const ALL_FRAMEWORK_FILES = [SYNTHETIC_SHADOW, LWC_ENGINE, SSR_CLIENT_UTILS];
 
 // Fix Node warning about >10 event listeners ("Possible EventEmitter memory leak detected").
 // This is due to the fact that we are running so many simultaneous rollup commands
@@ -40,6 +41,7 @@ function getFiles() {
     const files = [
         ...(ENABLE_SYNTHETIC_SHADOW_IN_HYDRATION ? [createPattern(SYNTHETIC_SHADOW)] : []),
         createPattern(LWC_ENGINE),
+        createPattern(SSR_CLIENT_UTILS),
         createPattern(TEST_SETUP),
         createPattern(TEST_UTILS),
         createPattern(TEST_HYDRATE),
diff --git a/packages/@lwc/integration-karma/scripts/karma-plugins/hydration-tests.js b/packages/@lwc/integration-karma/scripts/karma-plugins/hydration-tests.js
index f46fbee3a2..7a5d1cad1a 100644
--- a/packages/@lwc/integration-karma/scripts/karma-plugins/hydration-tests.js
+++ b/packages/@lwc/integration-karma/scripts/karma-plugins/hydration-tests.js
@@ -77,7 +77,13 @@ async function getCompiledModule(dirName, compileForSSR) {
             }),
         ],
 
-        external: ['lwc', '@lwc/ssr-runtime', 'test-utils', '@test/loader'], // @todo: add ssr modules for test-utils and @test/loader
+        external: [
+            'lwc',
+            '@lwc/ssr-runtime',
+            'test-utils',
+            '@test/loader',
+            '@lwc/ssr-client-utils',
+        ], // @todo: add ssr modules for test-utils and @test/loader
 
         onwarn(warning, warn) {
             // Ignore warnings from our own Rollup plugin
@@ -96,6 +102,7 @@ async function getCompiledModule(dirName, compileForSSR) {
             lwc: 'LWC',
             '@lwc/ssr-runtime': 'LWC',
             'test-utils': 'TestUtils',
+            '@lwc/ssr-client-utils': 'LwcSsrClientUtils',
         },
     });
 
@@ -156,7 +163,7 @@ async function getSsrCode(moduleCode, testConfig, filename, expectedSSRConsoleCa
                 'x-${COMPONENT_UNDER_TEST}-${guid++}',
                 Main,
                 config.props || {},
-                false,
+                true,
                 'sync'
             );
         `,
diff --git a/packages/@lwc/integration-karma/scripts/karma-plugins/transform-framework.js b/packages/@lwc/integration-karma/scripts/karma-plugins/transform-framework.js
index 85b2f15ee9..ce3863cafd 100644
--- a/packages/@lwc/integration-karma/scripts/karma-plugins/transform-framework.js
+++ b/packages/@lwc/integration-karma/scripts/karma-plugins/transform-framework.js
@@ -26,6 +26,8 @@ function getIifeName(filename) {
     } else if (filename.includes('aria-reflection')) {
         // aria reflection global polyfill does not need an IIFE name
         return undefined;
+    } else if (filename.includes('@lwc/ssr-client-utils')) {
+        return 'LwcSsrClientUtils';
     }
     throw new Error(`Unknown framework filename, not sure which IIFE name to use: ${filename}`);
 }
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/index.spec.js b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/index.spec.js
index e7a776e357..d3ab4b5e5f 100644
--- a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/index.spec.js
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/index.spec.js
@@ -1,18 +1,9 @@
 export default {
-    snapshot(target) {
-        return {
-            parent: target,
-            child: target.querySelector('x-child'),
-        };
-    },
-    advancedTest(target, { Component, hydrateComponent, consoleSpy }) {
-        const { parent, child } = this.snapshot(target);
-        hydrateComponent(target, Component, {});
-        const consoleCalls = consoleSpy.calls;
-        // Validate there is no class attribute mismatch
-        expect(consoleCalls.error).toHaveSize(0);
-        // Validate there is no hydration mismatch
-        expect(parent).toBe(target);
-        expect(child).toBe(target.querySelector('x-child'));
+    test(target, snapshot, consoleCalls) {
+        // Expect no errors or warnings, hydration or otherwise
+        TestUtils.expectConsoleCalls(consoleCalls, {
+            error: [],
+            warn: [],
+        });
     },
 };
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.html b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.html
index 7840cce9fe..6f06182f35 100644
--- a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.html
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.html
@@ -1,3 +1,3 @@
 <template lwc:render-mode="light">
-    <div></div>
+    <div class="blue">child content</div>
 </template>
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.scoped.css b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.scoped.css
index d0bcad1033..72e32daf4d 100644
--- a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.scoped.css
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.scoped.css
@@ -1,3 +1,3 @@
-:host {
-    padding: 8px;
+.blue {
+    background-color: blue;
 }
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/main/main.html
index 586e14e39f..9b2366dfc3 100644
--- a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/main/main.html
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/main/main.html
@@ -1,3 +1,4 @@
 <template lwc:render-mode="light">
     <x-child></x-child>
+    <x-child></x-child>
 </template>
diff --git a/packages/@lwc/ssr-client-utils/src/index.ts b/packages/@lwc/ssr-client-utils/src/index.ts
index ee39511dcf..3bac98b87d 100644
--- a/packages/@lwc/ssr-client-utils/src/index.ts
+++ b/packages/@lwc/ssr-client-utils/src/index.ts
@@ -24,6 +24,10 @@ class StyleDeduplicator extends HTMLElement {
             root.adoptedStyleSheets.push(stylesheet);
             const placeholder = document.createElement('style');
             placeholder.setAttribute('type', 'text/css');
+
+            // TODO [#2869]: `<style>`s should not have scope token classes but they are required for hydration to function correctly (W-19087941).
+            this.classList.forEach((className) => placeholder.classList.add(className));
+
             // Not-first <lwc-style> should be replaced with a placeholder <style>, since that's
             // what the diffing algorithm and hydration logic will expect to find
             this.replaceWith(placeholder);
@@ -56,3 +60,10 @@ class StyleDeduplicator extends HTMLElement {
 export function registerLwcStyleComponent() {
     customElements.define('lwc-style', StyleDeduplicator);
 }
+
+/**
+ * Clears the stylesheet cache. This is useful for testing purposes.
+ */
+export function clearStylesheetCache() {
+    stylesheetCache.clear();
+}
diff --git a/packages/@lwc/ssr-runtime/src/styles.ts b/packages/@lwc/ssr-runtime/src/styles.ts
index 20957feabc..c09554f81e 100644
--- a/packages/@lwc/ssr-runtime/src/styles.ts
+++ b/packages/@lwc/ssr-runtime/src/styles.ts
@@ -74,7 +74,8 @@ export function renderStylesheets(
             result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} type="text/css">${styleContents}</style>`;
         } else if (stylesheetToId.has(stylesheet)) {
             const styleId = stylesheetToId.get(stylesheet);
-            result += `<lwc-style style-id="lwc-style-${styleDedupePrefix}-${styleId}"></lwc-style>`;
+            // TODO [#2869]: `<style>`s should not have scope token classes, but required for hydration to function correctly (W-19087941).
+            result += `<lwc-style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} style-id="lwc-style-${styleDedupePrefix}-${styleId}"></lwc-style>`;
         } else {
             const styleId = emit.cxt.nextId++;
             stylesheetToId.set(stylesheet, styleId.toString());
diff --git a/packages/@lwc/template-compiler/README.md b/packages/@lwc/template-compiler/README.md
index 19e4141559..749f27a7d4 100644
--- a/packages/@lwc/template-compiler/README.md
+++ b/packages/@lwc/template-compiler/README.md
@@ -64,6 +64,7 @@ const { code, warnings } = compile(`<template><h1>Hello World!</h1></template>`,
 - `customRendererConfig` (CustomRendererConfig, optional) - specifies a configuration to use to match elements. Matched elements will get a custom renderer hook in the generated template.
 - `instrumentation` (InstrumentationObject, optional) - instrumentation object to gather metrics and non-error logs for internal use. See the `@lwc/errors` package for details on the interface.
 - `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller/faster output.
+
     - Example 1: Config to match `<use>` elements under the `svg` namespace and have `href` attribute set.
 
         ```
diff --git a/scripts/test-utils/swap-lwc-style-for-style.ts b/scripts/test-utils/swap-lwc-style-for-style.ts
index 560bb04718..7e4b33e60a 100644
--- a/scripts/test-utils/swap-lwc-style-for-style.ts
+++ b/scripts/test-utils/swap-lwc-style-for-style.ts
@@ -50,7 +50,8 @@ export function swapLwcStyleForStyleTag(src: string): string {
         });
     }
 
-    const lwcStyleCapture = /(\s*)<lwc-style style-id="([^"]+)">[^<]*<\/lwc-style>/s;
+    const lwcStyleCapture =
+        /(\s*)<lwc-style(?: class="[^"]*")? style-id="([^"]+)">[^<]*<\/lwc-style>/s;
     const idToStyleTag = Object.fromEntries(
         capturedStyleTags.map((styleTagInfo) => [styleTagInfo.styleId, styleTagInfo])
     );

From b7673c86f131c5d87f4216f322aef16383059644 Mon Sep 17 00:00:00 2001
From: John Hefferman <jhefferman@salesforce.com>
Date: Thu, 31 Jul 2025 12:53:14 -0600
Subject: [PATCH 2/4] fix: prettier, dedicated dedupe test

---
 .../child-scoped-styles/index.spec.js         | 21 +++++++++++++------
 .../child-scoped-styles/x/child/child.html    |  2 +-
 .../x/child/child.scoped.css                  |  4 ++--
 .../child-scoped-styles/x/main/main.html      |  3 +--
 packages/@lwc/template-compiler/README.md     |  1 -
 5 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/index.spec.js b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/index.spec.js
index d3ab4b5e5f..e7a776e357 100644
--- a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/index.spec.js
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/index.spec.js
@@ -1,9 +1,18 @@
 export default {
-    test(target, snapshot, consoleCalls) {
-        // Expect no errors or warnings, hydration or otherwise
-        TestUtils.expectConsoleCalls(consoleCalls, {
-            error: [],
-            warn: [],
-        });
+    snapshot(target) {
+        return {
+            parent: target,
+            child: target.querySelector('x-child'),
+        };
+    },
+    advancedTest(target, { Component, hydrateComponent, consoleSpy }) {
+        const { parent, child } = this.snapshot(target);
+        hydrateComponent(target, Component, {});
+        const consoleCalls = consoleSpy.calls;
+        // Validate there is no class attribute mismatch
+        expect(consoleCalls.error).toHaveSize(0);
+        // Validate there is no hydration mismatch
+        expect(parent).toBe(target);
+        expect(child).toBe(target.querySelector('x-child'));
     },
 };
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.html b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.html
index 6f06182f35..7840cce9fe 100644
--- a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.html
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.html
@@ -1,3 +1,3 @@
 <template lwc:render-mode="light">
-    <div class="blue">child content</div>
+    <div></div>
 </template>
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.scoped.css b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.scoped.css
index 72e32daf4d..d0bcad1033 100644
--- a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.scoped.css
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/child/child.scoped.css
@@ -1,3 +1,3 @@
-.blue {
-    background-color: blue;
+:host {
+    padding: 8px;
 }
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/main/main.html
index 9b2366dfc3..2d69fe28ac 100644
--- a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/main/main.html
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/nested-scoped-styles/child-scoped-styles/x/main/main.html
@@ -1,4 +1,3 @@
 <template lwc:render-mode="light">
-    <x-child></x-child>
-    <x-child></x-child>
+    <x-child class="main"></x-child>
 </template>
diff --git a/packages/@lwc/template-compiler/README.md b/packages/@lwc/template-compiler/README.md
index 749f27a7d4..19e4141559 100644
--- a/packages/@lwc/template-compiler/README.md
+++ b/packages/@lwc/template-compiler/README.md
@@ -64,7 +64,6 @@ const { code, warnings } = compile(`<template><h1>Hello World!</h1></template>`,
 - `customRendererConfig` (CustomRendererConfig, optional) - specifies a configuration to use to match elements. Matched elements will get a custom renderer hook in the generated template.
 - `instrumentation` (InstrumentationObject, optional) - instrumentation object to gather metrics and non-error logs for internal use. See the `@lwc/errors` package for details on the interface.
 - `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller/faster output.
-
     - Example 1: Config to match `<use>` elements under the `svg` namespace and have `href` attribute set.
 
         ```

From 5802b89444689307ec9af3eb805cfb500fc03d9e Mon Sep 17 00:00:00 2001
From: John Hefferman <jhefferman@salesforce.com>
Date: Thu, 31 Jul 2025 15:54:06 -0600
Subject: [PATCH 3/4] fix: missing tests

---
 .../scoped-styles/deduped-scoped-styles/index.spec.js    | 9 +++++++++
 .../deduped-scoped-styles/x/child/child.html             | 3 +++
 .../scoped-styles/deduped-scoped-styles/x/child/child.js | 5 +++++
 .../deduped-scoped-styles/x/child/child.scoped.css       | 3 +++
 .../scoped-styles/deduped-scoped-styles/x/main/main.css  | 3 +++
 .../scoped-styles/deduped-scoped-styles/x/main/main.html | 4 ++++
 .../scoped-styles/deduped-scoped-styles/x/main/main.js   | 5 +++++
 7 files changed, 32 insertions(+)
 create mode 100644 packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js
 create mode 100644 packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.html
 create mode 100644 packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.js
 create mode 100644 packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.scoped.css
 create mode 100644 packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.css
 create mode 100644 packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.html
 create mode 100644 packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.js

diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js
new file mode 100644
index 0000000000..d3ab4b5e5f
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js
@@ -0,0 +1,9 @@
+export default {
+    test(target, snapshot, consoleCalls) {
+        // Expect no errors or warnings, hydration or otherwise
+        TestUtils.expectConsoleCalls(consoleCalls, {
+            error: [],
+            warn: [],
+        });
+    },
+};
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.html b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.html
new file mode 100644
index 0000000000..6f06182f35
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.html
@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <div class="blue">child content</div>
+</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.js b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.js
new file mode 100644
index 0000000000..0679d2bc10
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.scoped.css b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.scoped.css
new file mode 100644
index 0000000000..72e32daf4d
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/child/child.scoped.css
@@ -0,0 +1,3 @@
+.blue {
+    background-color: blue;
+}
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.css b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.css
new file mode 100644
index 0000000000..edb1d0fb9d
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.css
@@ -0,0 +1,3 @@
+.main {
+    color: red;
+}
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.html
new file mode 100644
index 0000000000..9b2366dfc3
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.html
@@ -0,0 +1,4 @@
+<template lwc:render-mode="light">
+    <x-child></x-child>
+    <x-child></x-child>
+</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.js
new file mode 100644
index 0000000000..0679d2bc10
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/x/main/main.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}

From 6a7c9e6b821ad84ebd7cbbcb7eb7735ecd19713e Mon Sep 17 00:00:00 2001
From: John Hefferman <jhefferman@salesforce.com>
Date: Fri, 1 Aug 2025 10:10:31 -0600
Subject: [PATCH 4/4] fix: review comments

---
 packages/@lwc/integration-karma/helpers/test-hydrate.js   | 2 +-
 .../scoped-styles/deduped-scoped-styles/index.spec.js     | 2 +-
 packages/@lwc/ssr-client-utils/src/index.ts               | 8 +++-----
 packages/@lwc/ssr-runtime/src/styles.ts                   | 3 ++-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/@lwc/integration-karma/helpers/test-hydrate.js b/packages/@lwc/integration-karma/helpers/test-hydrate.js
index a28f8e72d0..ab26c9257d 100644
--- a/packages/@lwc/integration-karma/helpers/test-hydrate.js
+++ b/packages/@lwc/integration-karma/helpers/test-hydrate.js
@@ -33,7 +33,7 @@ window.HydrateTest = (function (lwc, testUtils) {
     }
 
     function runTest(ssrRendered, Component, testConfig) {
-        window.LwcSsrClientUtils.clearStylesheetCache();
+        window.__lwcClearStylesheetCache();
         const container = appendTestTarget(ssrRendered);
         const selector = container.firstChild.tagName.toLowerCase();
         let target = container.querySelector(selector);
diff --git a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js
index d3ab4b5e5f..84218066a9 100644
--- a/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js
+++ b/packages/@lwc/integration-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js
@@ -1,6 +1,6 @@
 export default {
     test(target, snapshot, consoleCalls) {
-        // Expect no errors or warnings, hydration or otherwise
+        // W-19087941: Expect no errors or warnings, hydration or otherwise
         TestUtils.expectConsoleCalls(consoleCalls, {
             error: [],
             warn: [],
diff --git a/packages/@lwc/ssr-client-utils/src/index.ts b/packages/@lwc/ssr-client-utils/src/index.ts
index 3bac98b87d..558db09f60 100644
--- a/packages/@lwc/ssr-client-utils/src/index.ts
+++ b/packages/@lwc/ssr-client-utils/src/index.ts
@@ -61,9 +61,7 @@ export function registerLwcStyleComponent() {
     customElements.define('lwc-style', StyleDeduplicator);
 }
 
-/**
- * Clears the stylesheet cache. This is useful for testing purposes.
- */
-export function clearStylesheetCache() {
-    stylesheetCache.clear();
+// Only used in LWC's Karma tests
+if (process.env.NODE_ENV === 'test-karma-lwc') {
+    (window as any).__lwcClearStylesheetCache = () => stylesheetCache.clear();
 }
diff --git a/packages/@lwc/ssr-runtime/src/styles.ts b/packages/@lwc/ssr-runtime/src/styles.ts
index c09554f81e..b9434d79dd 100644
--- a/packages/@lwc/ssr-runtime/src/styles.ts
+++ b/packages/@lwc/ssr-runtime/src/styles.ts
@@ -71,10 +71,11 @@ export function renderStylesheets(
         if (!styleDedupeIsEnabled) {
             const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
             validateStyleTextContents(styleContents);
+            // TODO [#2869]: `<style>`s should not have scope token classes
             result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} type="text/css">${styleContents}</style>`;
         } else if (stylesheetToId.has(stylesheet)) {
             const styleId = stylesheetToId.get(stylesheet);
-            // TODO [#2869]: `<style>`s should not have scope token classes, but required for hydration to function correctly (W-19087941).
+            // TODO [#2869]: `<lwc-style>`s should not have scope token classes, but required for hydration to function correctly (W-19087941).
             result += `<lwc-style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} style-id="lwc-style-${styleDedupePrefix}-${styleId}"></lwc-style>`;
         } else {
             const styleId = emit.cxt.nextId++;