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..ab26c9257d 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.__lwcClearStylesheetCache();
         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/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..84218066a9
--- /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) {
+        // W-19087941: 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';
+}
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..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,3 +1,3 @@
 <template lwc:render-mode="light">
-    <x-child></x-child>
+    <x-child class="main"></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..558db09f60 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,8 @@ class StyleDeduplicator extends HTMLElement {
 export function registerLwcStyleComponent() {
     customElements.define('lwc-style', StyleDeduplicator);
 }
+
+// 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 20957feabc..b9434d79dd 100644
--- a/packages/@lwc/ssr-runtime/src/styles.ts
+++ b/packages/@lwc/ssr-runtime/src/styles.ts
@@ -71,10 +71,12 @@ 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);
-            result += `<lwc-style style-id="lwc-style-${styleDedupePrefix}-${styleId}"></lwc-style>`;
+            // 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++;
             stylesheetToId.set(stylesheet, styleId.toString());
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])
     );