From 5989bf012652c3f8f2d89b66fecb84cec3d95465 Mon Sep 17 00:00:00 2001
From: Dale Bustad <dbustad@salesforce.com>
Date: Wed, 5 Mar 2025 13:39:22 -0800
Subject: [PATCH] feat: style deduplication (#5264)

* chore: reintroduce locker logic

* Update packages/@lwc/integration-karma/test/component/LightningElement/index.spec.js

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* feat: added style dedup in ssr (not working yet)

* fix: reference to runtime context on emit fn

* chore: rename CompilationContext to RuntimeContext (it was wrong before)

* chore: update SSR fixtures with dedupe keys

* feat: accept prefix for style dedupe identifiers

* feat: create @lwc/ssr-client-utils package with pre-hydration dedupe mechanism

* chore: add big TODO comment

* feat(lwc-style): add register util

TODO: make it actually get bundled

* feat(lwc-style): replace dummies with dumber dummies

* test: the SSRv1 fixture tests against SSRv2 fixtures

* chore: fix tests and test config

* chore: get all SSRv1 tests to pass with new lwc-style stuff

* chore: comments

* chore: more comments

* refactor: make it possible to disable style dedupe in SSRv2

* chore: provide `@lwc/ssr-client-utils/register` import

* chore: add comment about bare import

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* chore: use FIXME instead of "Followup needed"

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* refactor: destructure for better readability

* chore: add TODO

* refactor: make createMistmatchError generic

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* chore: add comment explaining regexp

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* chore: fix imprecision in code comment

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* chore: add comment explaining why we need repeated exec on regexp

* chore: indentation is 0 when falsey instead of null

* chore: address nit

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* chore: remove console.log

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* chore: add comment

* chore: bump CI

* chore: add skip file for flakey test

---------

Co-authored-by: John Hefferman <jhefferman@salesforce.com>
Co-authored-by: jhefferman-sfdc <83669775+jhefferman-sfdc@users.noreply.github.com>
Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
Co-authored-by: Will Harney <wharney@salesforce.com>
---
 package.json                                  |   2 +-
 .../engine-core/src/framework/hydration.ts    |   7 +-
 .../src/__tests__/fixtures.spec.ts            |   1 +
 .../dynamic/expected.html                     |  89 ++++-----
 .../static/expected.html                      |  49 +++--
 .../dynamic/expected.html                     |   4 +-
 .../static/expected.html                      |   4 +-
 .../with-scoped-styles/dynamic/expected.html  | 172 ++++++++----------
 .../with-scoped-styles/static/expected.html   |  53 +++---
 .../expected.html                             |   4 +-
 .../scoped-styles/expected.html               |   4 +-
 .../fixtures/light-dom-multiple/expected.html |  16 +-
 .../expected.html                             |   4 +-
 .../light-dom-scoped-styles/expected.html     |   8 +-
 .../light-dom-styles-dir-host/expected.html   |   8 +-
 .../fixtures/light-dom/expected.html          |   4 +-
 .../fixtures/no-dup-styles/expected.html      |   9 +-
 .../render-correct-tags/expected.html         |   4 +-
 .../src/__tests__/fixtures/scope-token/.skip  |   3 +
 .../scoped-slots/for-each/expected.html       |   4 +-
 .../expected.html                             |   4 +-
 .../shadow-dom-styles-dir-host/expected.html  |   8 +-
 .../expected.html                             |  16 +-
 .../expected.html                             |   8 +-
 .../expected.html                             |   8 +-
 .../scoped-and-unscoped/expected.html         |   8 +-
 .../unscoped-only-with-class/expected.html    |   4 +-
 .../expected.html                             |   4 +-
 .../unscoped-only/expected.html               |   4 +-
 .../expected.html                             |   8 +-
 .../expected.html                             |   8 +-
 .../style-dedupe-with-prefix/config.json      |   4 +
 .../style-dedupe-with-prefix/error.txt        |   0
 .../style-dedupe-with-prefix/expected.html    |  19 ++
 .../style-dedupe-with-prefix/index.js         |   3 +
 .../modules/x/child/child.css                 |   3 +
 .../modules/x/child/child.html                |   1 +
 .../modules/x/child/child.js                  |   3 +
 .../modules/x/parent/parent.html              |   4 +
 .../modules/x/parent/parent.js                |   3 +
 .../styles-escaping-safe/expected.html        |   4 +-
 .../fixtures/styles-keyframes/expected.html   |   4 +-
 .../fixtures/styles-shared/expected.html      |  17 +-
 .../__tests__/fixtures/styles/expected.html   |   4 +-
 packages/@lwc/ssr-client-utils/LICENSE.md     | 108 +++++++++++
 packages/@lwc/ssr-client-utils/README.md      |   3 +
 packages/@lwc/ssr-client-utils/package.json   |  51 ++++++
 .../ssr-client-utils/register-lwc-style.js    |  10 +
 packages/@lwc/ssr-client-utils/src/index.ts   |  58 ++++++
 packages/@lwc/ssr-client-utils/tsconfig.json  |   9 +
 .../src/__tests__/fixtures.spec.ts            |   6 +
 .../src/compile-js/generate-markup.ts         |   1 +
 .../src/compile-template/index.ts             |   2 +
 packages/@lwc/ssr-runtime/src/render.ts       |  17 ++
 packages/@lwc/ssr-runtime/src/styles.ts       |  30 ++-
 scripts/test-utils/html-snapshot-matcher.ts   | 101 ++++++++++
 scripts/test-utils/index.ts                   |   1 +
 .../test-utils/swap-lwc-style-for-style.ts    | 104 +++++++++++
 scripts/test-utils/test-fixture-dir.ts        |  18 +-
 59 files changed, 851 insertions(+), 266 deletions(-)
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/scope-token/.skip
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/config.json
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/error.txt
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/expected.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/index.js
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.css
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.js
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/parent/parent.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/parent/parent.js
 create mode 100644 packages/@lwc/ssr-client-utils/LICENSE.md
 create mode 100644 packages/@lwc/ssr-client-utils/README.md
 create mode 100644 packages/@lwc/ssr-client-utils/package.json
 create mode 100644 packages/@lwc/ssr-client-utils/register-lwc-style.js
 create mode 100644 packages/@lwc/ssr-client-utils/src/index.ts
 create mode 100644 packages/@lwc/ssr-client-utils/tsconfig.json
 create mode 100644 scripts/test-utils/html-snapshot-matcher.ts
 create mode 100644 scripts/test-utils/swap-lwc-style-for-style.ts

diff --git a/package.json b/package.json
index 98727b3e61..96c80e559c 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
         "*.{css,js,json,md,mjs,ts,yaml,yml}": "prettier --write",
         "{packages/**/package.json,scripts/tasks/check-and-rewrite-package-json.js}": "node ./scripts/tasks/check-and-rewrite-package-json.js",
         "{LICENSE-CORE.md,**/LICENSE.md,yarn.lock,scripts/tasks/generate-license-files.js,scripts/shared/bundled-dependencies.js}": "node ./scripts/tasks/generate-license-files.js",
-        "*.{only,skip}": "eslint --cache --no-eslintrc --plugin '@lwc/eslint-plugin-lwc-internal' --rule '@lwc/lwc-internal/forbidden-filename: error'"
+        "*.{only,skip}": "eslint --cache --plugin '@lwc/eslint-plugin-lwc-internal' --rule '@lwc/lwc-internal/forbidden-filename: error'"
     },
     "workspaces": [
         "packages/@lwc/*",
diff --git a/packages/@lwc/engine-core/src/framework/hydration.ts b/packages/@lwc/engine-core/src/framework/hydration.ts
index 2eb6002c87..6c1a65c7d9 100644
--- a/packages/@lwc/engine-core/src/framework/hydration.ts
+++ b/packages/@lwc/engine-core/src/framework/hydration.ts
@@ -368,7 +368,12 @@ function hydrateElement(elm: Node, vnode: VElement, renderer: RendererAPI): Node
 
     patchElementPropsAndAttrsAndRefs(vnode, renderer);
 
-    if (!isDomManual) {
+    // When <lwc-style> tags are initially encountered at the time of HTML parse, the <lwc-style> tag is
+    // replaced with an empty <style> tag. Additionally, the styles are attached to the shadow root as a
+    // constructed stylesheet at the same time. So, the shadow will be styled correctly and the only
+    // difference between what's in the DOM and what's in the VDOM is the string content inside the
+    // <style> tag. We can simply ignore that during hyration.
+    if (!isDomManual && vnode.elm.tagName !== 'STYLE') {
         const { getFirstChild } = renderer;
         hydrateChildren(getFirstChild(elm), vnode.children, elm, owner, false);
     }
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts b/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts
index 1b2370aa8b..61fb50691f 100755
--- a/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts
@@ -102,6 +102,7 @@ function testFixtures(options?: RollupLwcOptions) {
     testFixtureDir<FixtureConfig>(
         {
             root: path.resolve(__dirname, 'fixtures'),
+            ssrVersion: 1,
             pattern: '**/config.json',
         },
         async ({ dirname, config }) => {
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 bdd02d6c92..ce2037c3a3 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
@@ -2,9 +2,11 @@
   <template shadowrootmode="open">
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
+        <style class="lwc-5h3d35cke7v" id="lwc-style--0" type="text/css">
           :host {background: blue;}
         </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
@@ -15,9 +17,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
@@ -28,9 +29,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
@@ -41,9 +41,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
@@ -54,9 +53,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
@@ -67,9 +65,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
@@ -80,9 +77,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
@@ -93,9 +89,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
@@ -106,9 +101,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
@@ -119,9 +113,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="lwc-5h3d35cke7v">
@@ -132,9 +125,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="bar foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="bar foo lwc-5h3d35cke7v">
@@ -145,9 +137,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="baz foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="baz foo lwc-5h3d35cke7v">
@@ -158,9 +149,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="bar foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="bar foo lwc-5h3d35cke7v">
@@ -171,9 +161,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="bar foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="bar foo lwc-5h3d35cke7v">
@@ -184,9 +173,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="BaR FOO lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="BaR FOO lwc-5h3d35cke7v">
@@ -197,9 +185,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="foo lwc-5h3d35cke7v">
@@ -210,9 +197,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="foo lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="foo lwc-5h3d35cke7v">
@@ -223,9 +209,8 @@
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="&quot;'<&amp; lwc-5h3d35cke7v">
         </div>
         <x-grandchild class="&quot;'<&amp; lwc-5h3d35cke7v">
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 3a4bcc4564..cab0de7c37 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
@@ -2,90 +2,83 @@
   <template shadowrootmode="open">
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
+        <style class="lwc-5h3d35cke7v" id="lwc-style--0" type="text/css">
           :host {background: blue;}
         </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
       </template>
     </x-child>
     <x-child class="foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
       </template>
     </x-child>
     <x-child class="foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
       </template>
     </x-child>
     <x-child class="bar foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
       </template>
     </x-child>
     <x-child class="bar foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
       </template>
     </x-child>
     <x-child class="BAR BaZ FoA lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host tabs" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host newlines" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="lwc-5h3d35cke7v">
         </div>
       </template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-parent/dynamic/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-parent/dynamic/expected.html
index 50e0996efc..cc658ae7dd 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-parent/dynamic/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-parent/dynamic/expected.html
@@ -1,8 +1,10 @@
 <fixture-test class="lwc-ts1rr7v761-host" data-lwc-host-scope-token="lwc-ts1rr7v761-host">
   <template shadowrootmode="open">
-    <style class="lwc-ts1rr7v761" type="text/css">
+    <style class="lwc-ts1rr7v761" id="lwc-style--0" type="text/css">
       :host {background: green;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <x-child class="lwc-ts1rr7v761">
       <template shadowrootmode="open">
         <div>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-parent/static/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-parent/static/expected.html
index e33e9e1d91..2bfd226c6a 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-parent/static/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-parent/static/expected.html
@@ -1,8 +1,10 @@
 <fixture-test class="lwc-ts1rr7v761-host" data-lwc-host-scope-token="lwc-ts1rr7v761-host">
   <template shadowrootmode="open">
-    <style class="lwc-ts1rr7v761" type="text/css">
+    <style class="lwc-ts1rr7v761" id="lwc-style--0" type="text/css">
       :host {background: green;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <x-child class="lwc-ts1rr7v761">
       <template shadowrootmode="open">
         <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 a9d9464c89..2d2fe174c0 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
@@ -1,276 +1,250 @@
 <fixture-test class="lwc-ts1rr7v761-host" data-lwc-host-scope-token="lwc-ts1rr7v761-host">
   <template shadowrootmode="open">
-    <style class="lwc-ts1rr7v761" type="text/css">
+    <style class="lwc-ts1rr7v761" id="lwc-style--0" type="text/css">
       :host {background: green;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
+        <style class="lwc-5h3d35cke7v" id="lwc-style--1" type="text/css">
           :host {background: blue;}
         </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
+            <style class="lwc-42b236sbaik" id="lwc-style--2" type="text/css">
               :host {background: red;}
             </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
     </x-child>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-            <style class="lwc-42b236sbaik" type="text/css">
-              :host {background: red;}
-            </style>
+            <lwc-style style-id="lwc-style--2">
+            </lwc-style>
           </template>
         </x-grandchild>
       </template>
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 bf0afd6296..7e9e5c654e 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
@@ -1,76 +1,71 @@
 <fixture-test class="lwc-ts1rr7v761-host" data-lwc-host-scope-token="lwc-ts1rr7v761-host">
   <template shadowrootmode="open">
-    <style class="lwc-ts1rr7v761" type="text/css">
+    <style class="lwc-ts1rr7v761" id="lwc-style--0" type="text/css">
       :host {background: green;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <x-child class="lwc-5h3d35cke7v-host lwc-ts1rr7v761" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
       <template shadowrootmode="open">
-        <style class="lwc-5h3d35cke7v" type="text/css">
+        <style class="lwc-5h3d35cke7v" id="lwc-style--1" type="text/css">
           :host {background: blue;}
         </style>
+        <lwc-style 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">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style 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">
-        <style class="lwc-5h3d35cke7v" type="text/css">
-          :host {background: blue;}
-        </style>
+        <lwc-style style-id="lwc-style--1">
+        </lwc-style>
       </template>
     </x-child>
     <div class="lwc-ts1rr7v761">
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-with-scoped-css/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-with-scoped-css/expected.html
index cd3f3781c1..aa008cc72a 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-with-scoped-css/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-with-scoped-css/expected.html
@@ -1,8 +1,10 @@
 <fixture-test class="lwc-47oqt8q93b2-host" data-lwc-host-scope-token="lwc-47oqt8q93b2-host">
   <template shadowrootmode="open">
-    <style class="lwc-47oqt8q93b2" type="text/css">
+    <style class="lwc-47oqt8q93b2" id="lwc-style--0" type="text/css">
       div.lwc-47oqt8q93b2 {color: black;}div.kree.lwc-47oqt8q93b2 {color: blue;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <div class="kree lwc-47oqt8q93b2">
       In the middle of my backswing?!
     </div>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/scoped-styles/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/scoped-styles/expected.html
index dfefb7b229..b47610000f 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/scoped-styles/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/scoped-styles/expected.html
@@ -2,9 +2,11 @@
   <template shadowrootmode="open">
     <x-scoped-style class="lwc-2d8pgjj85pu-host" data-lwc-host-scope-token="lwc-2d8pgjj85pu-host">
       <template shadowrootmode="open">
-        <style class="lwc-2d8pgjj85pu" type="text/css">
+        <style class="lwc-2d8pgjj85pu" id="lwc-style--0" type="text/css">
           div.lwc-2d8pgjj85pu {background-color: wheat;}
         </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
         <div class="foo lwc-2d8pgjj85pu">
         </div>
         <div class="bar lwc-2d8pgjj85pu">
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-multiple/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-multiple/expected.html
index 9a46184615..e6af5bc7d7 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-multiple/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-multiple/expected.html
@@ -1,25 +1,33 @@
 <fixture-test>
-  <style type="text/css">
+  <style id="lwc-style--0" type="text/css">
     p {background-color: blue;}
   </style>
-  <style type="text/css">
+  <lwc-style style-id="lwc-style--0">
+  </lwc-style>
+  <style id="lwc-style--1" type="text/css">
     p {color: red;}
   </style>
+  <lwc-style style-id="lwc-style--1">
+  </lwc-style>
   <p>
     Hello
   </p>
   <x-one>
-    <style type="text/css">
+    <style id="lwc-style--2" type="text/css">
       p {color: saddlebrown;}
     </style>
+    <lwc-style style-id="lwc-style--2">
+    </lwc-style>
     <p>
       one
     </p>
   </x-one>
   <x-two>
-    <style type="text/css">
+    <style id="lwc-style--3" type="text/css">
       p {color: goldenrod;}
     </style>
+    <lwc-style style-id="lwc-style--3">
+    </lwc-style>
     <p>
       two
     </p>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-scoped-styles-render/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-scoped-styles-render/expected.html
index 1ec13e9483..92822c4dc1 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-scoped-styles-render/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-scoped-styles-render/expected.html
@@ -1,7 +1,9 @@
 <fixture-test class="lwc-7q48250iir7-host" data-lwc-host-scope-token="lwc-7q48250iir7-host">
-  <style class="lwc-7q48250iir7" type="text/css">
+  <style class="lwc-7q48250iir7" id="lwc-style--0" type="text/css">
     p.lwc-7q48250iir7 {background-color: blue;}
   </style>
+  <lwc-style style-id="lwc-style--0">
+  </lwc-style>
   <p class="lwc-7q48250iir7">
     Hello
   </p>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-scoped-styles/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-scoped-styles/expected.html
index 654e01cac5..fa571a3aa3 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-scoped-styles/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-scoped-styles/expected.html
@@ -1,10 +1,14 @@
 <fixture-test class="lwc-1rssj1tib70-host" data-lwc-host-scope-token="lwc-1rssj1tib70-host">
-  <style class="lwc-1rssj1tib70" type="text/css">
+  <style class="lwc-1rssj1tib70" id="lwc-style--0" type="text/css">
     p {color: red;}
   </style>
-  <style class="lwc-1rssj1tib70" type="text/css">
+  <lwc-style style-id="lwc-style--0">
+  </lwc-style>
+  <style class="lwc-1rssj1tib70" id="lwc-style--1" type="text/css">
     p.lwc-1rssj1tib70 {background-color: blue;}.lwc-1rssj1tib70-host {display: block;border: 1px solid black;}
   </style>
+  <lwc-style style-id="lwc-style--1">
+  </lwc-style>
   <p class="lwc-1rssj1tib70">
     Hello
   </p>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-styles-dir-host/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-styles-dir-host/expected.html
index c45678dcfb..ed02c1d23e 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-styles-dir-host/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-styles-dir-host/expected.html
@@ -1,10 +1,14 @@
 <fixture-test class="lwc-1rssj1tib70-host" data-lwc-host-scope-token="lwc-1rssj1tib70-host">
-  <style class="lwc-1rssj1tib70" type="text/css">
+  <style class="lwc-1rssj1tib70" id="lwc-style--0" type="text/css">
      :dir(rtl) {margin-left: 0;}:host {color: red;}
   </style>
-  <style class="lwc-1rssj1tib70" type="text/css">
+  <lwc-style style-id="lwc-style--0">
+  </lwc-style>
+  <style class="lwc-1rssj1tib70" id="lwc-style--1" type="text/css">
      :dir(ltr) {margin-right: 0;}.lwc-1rssj1tib70-host {color: blue;}
   </style>
+  <lwc-style style-id="lwc-style--1">
+  </lwc-style>
   <p class="lwc-1rssj1tib70">
     Hello
   </p>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom/expected.html
index d72ea0fec5..37ae856dd0 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/light-dom/expected.html
@@ -1,7 +1,9 @@
 <fixture-test>
-  <style type="text/css">
+  <style id="lwc-style--0" type="text/css">
     p {color: red;}
   </style>
+  <lwc-style style-id="lwc-style--0">
+  </lwc-style>
   <p>
     Hello
   </p>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/no-dup-styles/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/no-dup-styles/expected.html
index 24c8883195..6ddda6a30e 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/no-dup-styles/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/no-dup-styles/expected.html
@@ -2,16 +2,17 @@
   <template shadowrootmode="open">
     <x-child>
       <template shadowrootmode="open">
-        <style type="text/css">
+        <style id="lwc-style--0" type="text/css">
           :host {color: chocolate;}
         </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
       </template>
     </x-child>
     <x-child>
       <template shadowrootmode="open">
-        <style type="text/css">
-          :host {color: chocolate;}
-        </style>
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
       </template>
     </x-child>
   </template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/render-correct-tags/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/render-correct-tags/expected.html
index 099aeea0e0..4d6ec6e9df 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/render-correct-tags/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/render-correct-tags/expected.html
@@ -1,8 +1,10 @@
 <fixture-test class="lwc-4q9u0sqsfc0-host" data-lwc-host-scope-token="lwc-4q9u0sqsfc0-host">
   <template shadowrootmode="open">
-    <style class="lwc-4q9u0sqsfc0" type="text/css">
+    <style class="lwc-4q9u0sqsfc0" id="lwc-style--0" type="text/css">
       :host {background: blue;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <a class="lwc-4q9u0sqsfc0" href="https://www.salesforce.com/">
     </a>
     <label class="lwc-4q9u0sqsfc0" for="textInput">
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/scope-token/.skip b/packages/@lwc/engine-server/src/__tests__/fixtures/scope-token/.skip
new file mode 100644
index 0000000000..03bdfe79cc
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/scope-token/.skip
@@ -0,0 +1,3 @@
+W-17972327
+
+This test fails in CI and has been doing so intermittently in recent PRs. Unfortunately, it has been difficult to reproduce and resolve when running locally. Since the failure is unrelated to this PR, we're disabling the test and have filed a work item (reference above) to investigate separately.
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/scoped-slots/for-each/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/scoped-slots/for-each/expected.html
index e752aebe07..598503c1dc 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/scoped-slots/for-each/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/scoped-slots/for-each/expected.html
@@ -1,8 +1,10 @@
 <fixture-test>
   <template shadowrootmode="open">
-    <style type="text/css">
+    <style id="lwc-style--0" type="text/css">
       span {background-color: blue;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <x-child-with-for-each>
       <ul>
         <li>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/scoped-styles-with-existing-class/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/scoped-styles-with-existing-class/expected.html
index a09682d84f..bab0966300 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/scoped-styles-with-existing-class/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/scoped-styles-with-existing-class/expected.html
@@ -1,8 +1,10 @@
 <fixture-test class="lwc-6a8uqob2ku4-host" data-lwc-host-scope-token="lwc-6a8uqob2ku4-host">
   <template shadowrootmode="open">
-    <style class="lwc-6a8uqob2ku4" type="text/css">
+    <style class="lwc-6a8uqob2ku4" id="lwc-style--0" type="text/css">
       div.lwc-6a8uqob2ku4 {background-color: wheat;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <div class="foo lwc-6a8uqob2ku4">
     </div>
     <div class="bar lwc-6a8uqob2ku4">
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/shadow-dom-styles-dir-host/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/shadow-dom-styles-dir-host/expected.html
index bf12db9074..9bc6bfbff0 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/shadow-dom-styles-dir-host/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/shadow-dom-styles-dir-host/expected.html
@@ -1,11 +1,15 @@
 <fixture-test class="lwc-1rssj1tib70-host" data-lwc-host-scope-token="lwc-1rssj1tib70-host">
   <template shadowrootmode="open">
-    <style class="lwc-1rssj1tib70" type="text/css">
+    <style class="lwc-1rssj1tib70" id="lwc-style--0" type="text/css">
        :dir(rtl) {margin-left: 0;}:host {color: red;}
     </style>
-    <style class="lwc-1rssj1tib70" type="text/css">
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
+    <style class="lwc-1rssj1tib70" id="lwc-style--1" type="text/css">
        :dir(ltr) {margin-right: 0;}:host {color: blue;}
     </style>
+    <lwc-style style-id="lwc-style--1">
+    </lwc-style>
     <p class="lwc-1rssj1tib70">
       Hello
     </p>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-dynamic-render/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-dynamic-render/expected.html
index 164e84f4a0..de1b41f96b 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-dynamic-render/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-dynamic-render/expected.html
@@ -1,17 +1,25 @@
 <fixture-test class="lwc-72njdrv8nr1-host" data-lwc-host-scope-token="lwc-72njdrv8nr1-host">
   <template shadowrootmode="open">
-    <style class="lwc-72njdrv8nr1" type="text/css">
+    <style class="lwc-72njdrv8nr1" id="lwc-style--0" type="text/css">
       h1 {border: 1px solid goldenrod;}
     </style>
-    <style class="lwc-72njdrv8nr1" type="text/css">
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
+    <style class="lwc-72njdrv8nr1" id="lwc-style--1" type="text/css">
       h1.lwc-72njdrv8nr1 {outline: 2px solid chartreuse;}
     </style>
-    <style class="lwc-72njdrv8nr1" type="text/css">
+    <lwc-style style-id="lwc-style--1">
+    </lwc-style>
+    <style class="lwc-72njdrv8nr1" id="lwc-style--2" type="text/css">
       h1 {background: royalblue;}
     </style>
-    <style class="lwc-72njdrv8nr1" type="text/css">
+    <lwc-style style-id="lwc-style--2">
+    </lwc-style>
+    <style class="lwc-72njdrv8nr1" id="lwc-style--3" type="text/css">
       h1.lwc-72njdrv8nr1 {color: cornsilk;}
     </style>
+    <lwc-style style-id="lwc-style--3">
+    </lwc-style>
     <h1 class="lwc-72njdrv8nr1">
       hello
     </h1>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-with-class/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-with-class/expected.html
index 4ad8d36df3..1efc290e58 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-with-class/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-with-class/expected.html
@@ -1,11 +1,15 @@
 <fixture-test class="lwc-1l667kdb4s5-host" data-lwc-host-scope-token="lwc-1l667kdb4s5-host">
   <template shadowrootmode="open">
-    <style class="lwc-1l667kdb4s5" type="text/css">
+    <style class="lwc-1l667kdb4s5" id="lwc-style--0" type="text/css">
       .yolo {background: royalblue;}
     </style>
-    <style class="lwc-1l667kdb4s5" type="text/css">
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
+    <style class="lwc-1l667kdb4s5" id="lwc-style--1" type="text/css">
       h1.lwc-1l667kdb4s5 {color: cornsilk;}
     </style>
+    <lwc-style style-id="lwc-style--1">
+    </lwc-style>
     <h1 class="lwc-1l667kdb4s5 yolo">
       hello
     </h1>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-with-dynamic-class/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-with-dynamic-class/expected.html
index 4ad8d36df3..1efc290e58 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-with-dynamic-class/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-with-dynamic-class/expected.html
@@ -1,11 +1,15 @@
 <fixture-test class="lwc-1l667kdb4s5-host" data-lwc-host-scope-token="lwc-1l667kdb4s5-host">
   <template shadowrootmode="open">
-    <style class="lwc-1l667kdb4s5" type="text/css">
+    <style class="lwc-1l667kdb4s5" id="lwc-style--0" type="text/css">
       .yolo {background: royalblue;}
     </style>
-    <style class="lwc-1l667kdb4s5" type="text/css">
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
+    <style class="lwc-1l667kdb4s5" id="lwc-style--1" type="text/css">
       h1.lwc-1l667kdb4s5 {color: cornsilk;}
     </style>
+    <lwc-style style-id="lwc-style--1">
+    </lwc-style>
     <h1 class="lwc-1l667kdb4s5 yolo">
       hello
     </h1>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped/expected.html
index e68b46a0f7..3b4226a416 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped/expected.html
@@ -1,11 +1,15 @@
 <fixture-test class="lwc-1l667kdb4s5-host" data-lwc-host-scope-token="lwc-1l667kdb4s5-host">
   <template shadowrootmode="open">
-    <style class="lwc-1l667kdb4s5" type="text/css">
+    <style class="lwc-1l667kdb4s5" id="lwc-style--0" type="text/css">
       h1 {background: royalblue;}
     </style>
-    <style class="lwc-1l667kdb4s5" type="text/css">
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
+    <style class="lwc-1l667kdb4s5" id="lwc-style--1" type="text/css">
       h1.lwc-1l667kdb4s5 {color: cornsilk;}
     </style>
+    <lwc-style style-id="lwc-style--1">
+    </lwc-style>
     <h1 class="lwc-1l667kdb4s5">
       hello
     </h1>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only-with-class/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only-with-class/expected.html
index 26ca09e765..3c129015f6 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only-with-class/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only-with-class/expected.html
@@ -1,8 +1,10 @@
 <fixture-test>
   <template shadowrootmode="open">
-    <style type="text/css">
+    <style id="lwc-style--0" type="text/css">
       .yolo {background: royalblue;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <h1 class="yolo">
       hello
     </h1>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only-with-dynamic-class/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only-with-dynamic-class/expected.html
index 26ca09e765..3c129015f6 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only-with-dynamic-class/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only-with-dynamic-class/expected.html
@@ -1,8 +1,10 @@
 <fixture-test>
   <template shadowrootmode="open">
-    <style type="text/css">
+    <style id="lwc-style--0" type="text/css">
       .yolo {background: royalblue;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <h1 class="yolo">
       hello
     </h1>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only/expected.html
index 33df11f71e..1429e71d67 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-only/expected.html
@@ -1,8 +1,10 @@
 <fixture-test>
   <template shadowrootmode="open">
-    <style type="text/css">
+    <style id="lwc-style--0" type="text/css">
       h1 {background: royalblue;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <h1>
       hello
     </h1>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-with-scoped-template-styles-and-class/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-with-scoped-template-styles-and-class/expected.html
index 36ed374708..96a305ccb6 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-with-scoped-template-styles-and-class/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-with-scoped-template-styles-and-class/expected.html
@@ -1,11 +1,15 @@
 <fixture-test class="lwc-1l667kdb4s5-host" data-lwc-host-scope-token="lwc-1l667kdb4s5-host">
   <template shadowrootmode="open">
-    <style class="lwc-1l667kdb4s5" type="text/css">
+    <style class="lwc-1l667kdb4s5" id="lwc-style--0" type="text/css">
       h1.lwc-1l667kdb4s5 {opacity: 0.5;}
     </style>
-    <style class="lwc-1l667kdb4s5" type="text/css">
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
+    <style class="lwc-1l667kdb4s5" id="lwc-style--1" type="text/css">
       .yolo {background: royalblue;}
     </style>
+    <lwc-style style-id="lwc-style--1">
+    </lwc-style>
     <h1 class="lwc-1l667kdb4s5 yolo">
       hello
     </h1>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-with-scoped-template-styles/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-with-scoped-template-styles/expected.html
index 37b998ea63..2aba5975e1 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-with-scoped-template-styles/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-with-scoped-template-styles/expected.html
@@ -1,11 +1,15 @@
 <fixture-test class="lwc-1l667kdb4s5-host" data-lwc-host-scope-token="lwc-1l667kdb4s5-host">
   <template shadowrootmode="open">
-    <style class="lwc-1l667kdb4s5" type="text/css">
+    <style class="lwc-1l667kdb4s5" id="lwc-style--0" type="text/css">
       h1.lwc-1l667kdb4s5 {opacity: 0.5;}
     </style>
-    <style class="lwc-1l667kdb4s5" type="text/css">
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
+    <style class="lwc-1l667kdb4s5" id="lwc-style--1" type="text/css">
       h1 {background: royalblue;}
     </style>
+    <lwc-style style-id="lwc-style--1">
+    </lwc-style>
     <h1 class="lwc-1l667kdb4s5">
       hello
     </h1>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/config.json b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/config.json
new file mode 100644
index 0000000000..b51f2d2df5
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/config.json
@@ -0,0 +1,4 @@
+{
+    "entry": "x/parent",
+    "styleDedupePrefix": "island1"
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/error.txt
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/expected.html
new file mode 100644
index 0000000000..0e78d18938
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/expected.html
@@ -0,0 +1,19 @@
+<fixture-test>
+  <template shadowrootmode="open">
+    <x-child>
+      <template shadowrootmode="open">
+        <style id="lwc-style-island1-0" type="text/css">
+          :host {color: chocolate;}
+        </style>
+        <lwc-style style-id="lwc-style-island1-0">
+        </lwc-style>
+      </template>
+    </x-child>
+    <x-child>
+      <template shadowrootmode="open">
+        <lwc-style style-id="lwc-style-island1-0">
+        </lwc-style>
+      </template>
+    </x-child>
+  </template>
+</fixture-test>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/index.js
new file mode 100644
index 0000000000..d5a55ceefa
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/index.js
@@ -0,0 +1,3 @@
+export const tagName = 'x-parent';
+export { default } from 'x/parent';
+export * from 'x/parent';
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.css b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.css
new file mode 100644
index 0000000000..5d887b5489
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.css
@@ -0,0 +1,3 @@
+:host {
+    color: chocolate;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.html b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.html
new file mode 100644
index 0000000000..cc340bc4c9
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.html
@@ -0,0 +1 @@
+<template></template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.js b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.js
new file mode 100644
index 0000000000..ca8dce94e0
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/child/child.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/parent/parent.html b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/parent/parent.html
new file mode 100644
index 0000000000..3c639c9527
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/parent/parent.html
@@ -0,0 +1,4 @@
+<template>
+    <x-child></x-child>
+    <x-child></x-child>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/parent/parent.js b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/parent/parent.js
new file mode 100644
index 0000000000..ca8dce94e0
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/style-dedupe-with-prefix/modules/x/parent/parent.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/styles-escaping-safe/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/styles-escaping-safe/expected.html
index 24d68efd27..4c7dcb837f 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/styles-escaping-safe/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/styles-escaping-safe/expected.html
@@ -1,7 +1,9 @@
 <fixture-test>
   <template shadowrootmode="open">
-    <style type="text/css">
+    <style id="lwc-style--0" type="text/css">
       [data-foo="'&<>"] {color: black;}[data-foo='"'] {color: white;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
   </template>
 </fixture-test>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/styles-keyframes/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/styles-keyframes/expected.html
index cf1b408342..0c753bdde6 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/styles-keyframes/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/styles-keyframes/expected.html
@@ -1,8 +1,10 @@
 <fixture-test>
   <template shadowrootmode="open">
-    <style type="text/css">
+    <style id="lwc-style--0" type="text/css">
       @keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.spin {animation: 1s linear infinite spin;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <div class="spin">
     </div>
   </template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/styles-shared/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/styles-shared/expected.html
index c7fe2b4be6..6a17e9b98c 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/styles-shared/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/styles-shared/expected.html
@@ -1,19 +1,24 @@
 <fixture-test>
   <template shadowrootmode="open">
-    <style type="text/css">
+    <style id="lwc-style--0" type="text/css">
       div {border: 1px solid turquoise;}
     </style>
-    <style type="text/css">
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
+    <style id="lwc-style--1" type="text/css">
       div {background: blue;}
     </style>
+    <lwc-style style-id="lwc-style--1">
+    </lwc-style>
     <x-child>
       <template shadowrootmode="open">
-        <style type="text/css">
-          div {border: 1px solid turquoise;}
-        </style>
-        <style type="text/css">
+        <lwc-style style-id="lwc-style--0">
+        </lwc-style>
+        <style id="lwc-style--2" type="text/css">
           div {color: red;}
         </style>
+        <lwc-style style-id="lwc-style--2">
+        </lwc-style>
         <div>
           Hello child
         </div>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/styles/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/styles/expected.html
index 146ccd051a..d4a9d3e712 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/styles/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/styles/expected.html
@@ -1,8 +1,10 @@
 <fixture-test>
   <template shadowrootmode="open">
-    <style type="text/css">
+    <style id="lwc-style--0" type="text/css">
       :host {color: red;}.foo {color: blue;}.foo .bar {color: green;}
     </style>
+    <lwc-style style-id="lwc-style--0">
+    </lwc-style>
     <div class="foo">
       <p class="bar">
       </p>
diff --git a/packages/@lwc/ssr-client-utils/LICENSE.md b/packages/@lwc/ssr-client-utils/LICENSE.md
new file mode 100644
index 0000000000..21c441068e
--- /dev/null
+++ b/packages/@lwc/ssr-client-utils/LICENSE.md
@@ -0,0 +1,108 @@
+# LWC core license
+
+MIT LICENSE
+
+Copyright (c) 2025, Salesforce, Inc.
+All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+# Licenses of bundled dependencies
+
+## @parse5/tools
+
+The MIT License (MIT)
+
+Copyright © 2024 James Garbutt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+## entities
+
+Copyright (c) Felix Böhm
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+## estree-walker
+
+Copyright (c) 2015-20 [these people](https://github.com/Rich-Harris/estree-walker/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+## observable-membrane
+
+MIT License
+
+Copyright (c) 2017 Salesforce
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+## parse5
+
+Copyright (c) 2013-2019 Ivan Nikulin (ifaaan@gmail.com, https://github.com/inikulin)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/packages/@lwc/ssr-client-utils/README.md b/packages/@lwc/ssr-client-utils/README.md
new file mode 100644
index 0000000000..f68616356c
--- /dev/null
+++ b/packages/@lwc/ssr-client-utils/README.md
@@ -0,0 +1,3 @@
+# @lwc/ssr-client-utils
+
+This is an experimental package containing a utility functions for server-side rendered components. It may break at any point.
diff --git a/packages/@lwc/ssr-client-utils/package.json b/packages/@lwc/ssr-client-utils/package.json
new file mode 100644
index 0000000000..abdb7ee8f1
--- /dev/null
+++ b/packages/@lwc/ssr-client-utils/package.json
@@ -0,0 +1,51 @@
+{
+    "//": [
+        "THIS FILE IS AUTOGENERATED. If you modify it, it will be rewritten by check-and-rewrite-package-json.js",
+        "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
+    ],
+    "name": "@lwc/ssr-client-utils",
+    "version": "8.13.2",
+    "description": "Client-side complement to @lwc/ssr-compiler",
+    "keywords": [
+        "lwc",
+        "runtime",
+        "ssr"
+    ],
+    "homepage": "https://lwc.dev",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/salesforce/lwc.git",
+        "directory": "packages/@lwc/ssr-client-utils"
+    },
+    "bugs": {
+        "url": "https://github.com/salesforce/lwc/issues"
+    },
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "volta": {
+        "extends": "../../../package.json"
+    },
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist/**/*.js",
+        "dist/**/*.d.ts"
+    ],
+    "scripts": {
+        "build": "rollup --config ../../../scripts/rollup/rollup.config.js",
+        "dev": "rollup  --config ../../../scripts/rollup/rollup.config.js --watch --no-watch.clearScreen"
+    },
+    "nx": {
+        "targets": {
+            "build": {
+                "outputs": [
+                    "{projectRoot}/dist"
+                ]
+            }
+        }
+    },
+    "devDependencies": {}
+}
diff --git a/packages/@lwc/ssr-client-utils/register-lwc-style.js b/packages/@lwc/ssr-client-utils/register-lwc-style.js
new file mode 100644
index 0000000000..c1dfc78f2a
--- /dev/null
+++ b/packages/@lwc/ssr-client-utils/register-lwc-style.js
@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2025, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+import { registerLwcStyleComponent } from './dist/index';
+
+registerLwcStyleComponent();
diff --git a/packages/@lwc/ssr-client-utils/src/index.ts b/packages/@lwc/ssr-client-utils/src/index.ts
new file mode 100644
index 0000000000..ee39511dcf
--- /dev/null
+++ b/packages/@lwc/ssr-client-utils/src/index.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2025, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+type RootNode = Node & DocumentOrShadowRoot & NonElementParentNode;
+
+const stylesheetCache = new Map();
+
+class StyleDeduplicator extends HTMLElement {
+    connectedCallback() {
+        const styleId = this.getAttribute('style-id');
+
+        if (!styleId) {
+            throw new Error('"style-id" attribute must be supplied for <lwc-style> element');
+        }
+
+        const root = this.getRootNode() as RootNode;
+        let stylesheet = stylesheetCache.get(styleId);
+
+        if (stylesheet) {
+            root.adoptedStyleSheets.push(stylesheet);
+            const placeholder = document.createElement('style');
+            placeholder.setAttribute('type', 'text/css');
+            // 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);
+        } else {
+            stylesheet = new CSSStyleSheet();
+            const element = root.getElementById(styleId);
+
+            if (!element) {
+                throw new Error(
+                    `<lwc-style> tag found with no corresponding <style id="${styleId}"> tag`
+                );
+            }
+
+            stylesheet.replaceSync(element.innerHTML);
+            stylesheetCache.set(styleId, stylesheet);
+            // The first <lwc-style> should be removed, because it already has a <style> next to it
+            this.remove();
+        }
+    }
+}
+
+/**
+ * This function should be called in a <script> tag in the <head>
+ * before server-rendered markup is encountered while parsing an HTML
+ * document. This ensures that deduplicated styles will be in effect
+ * for components that insert an <lwc-style> tag in place of a full
+ * stylesheet.
+ * It can also be implicitly invoked by importing `@lwc/ssr-client-utils/register-lwc-style` as a bare import.
+ */
+export function registerLwcStyleComponent() {
+    customElements.define('lwc-style', StyleDeduplicator);
+}
diff --git a/packages/@lwc/ssr-client-utils/tsconfig.json b/packages/@lwc/ssr-client-utils/tsconfig.json
new file mode 100644
index 0000000000..35790d1865
--- /dev/null
+++ b/packages/@lwc/ssr-client-utils/tsconfig.json
@@ -0,0 +1,9 @@
+{
+    "extends": "../../../tsconfig.json",
+
+    "compilerOptions": {
+        "lib": ["es2023", "DOM"]
+    },
+
+    "include": ["src/"]
+}
diff --git a/packages/@lwc/ssr-compiler/src/__tests__/fixtures.spec.ts b/packages/@lwc/ssr-compiler/src/__tests__/fixtures.spec.ts
index 65c48b8258..dc5024d546 100644
--- a/packages/@lwc/ssr-compiler/src/__tests__/fixtures.spec.ts
+++ b/packages/@lwc/ssr-compiler/src/__tests__/fixtures.spec.ts
@@ -30,6 +30,9 @@ interface FixtureConfig {
         error?: string;
         expected?: string;
     };
+
+    /** The string used to uniquely identify one set of dedupe IDs with multiple SSR islands */
+    styleDedupePrefix?: string;
 }
 
 vi.mock('@lwc/ssr-runtime', async () => {
@@ -92,6 +95,7 @@ describe.concurrent('fixtures', () => {
         {
             root: path.resolve(__dirname, '../../../engine-server/src/__tests__/fixtures'),
             pattern: '**/config.json',
+            ssrVersion: 2,
             // TODO [#4815]: enable all SSR v2 tests
             expectedFailures,
         },
@@ -123,6 +127,8 @@ describe.concurrent('fixtures', () => {
                         'fixture-test',
                         module,
                         config?.props ?? {},
+                        config?.styleDedupePrefix ?? '',
+                        true,
                         SSR_MODE
                     )
                 );
diff --git a/packages/@lwc/ssr-compiler/src/compile-js/generate-markup.ts b/packages/@lwc/ssr-compiler/src/compile-js/generate-markup.ts
index af47ac1db0..8d50ed049f 100644
--- a/packages/@lwc/ssr-compiler/src/compile-js/generate-markup.ts
+++ b/packages/@lwc/ssr-compiler/src/compile-js/generate-markup.ts
@@ -27,6 +27,7 @@ const bGenerateMarkup = esTemplate`
         enumerable: false,
         writable: false,
         value: async function* generateMarkup(
+            // The $$emit function is magically inserted here
             tagName, 
             props, 
             attrs,
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/index.ts b/packages/@lwc/ssr-compiler/src/compile-template/index.ts
index ba27307638..a4da0dacd9 100644
--- a/packages/@lwc/ssr-compiler/src/compile-template/index.ts
+++ b/packages/@lwc/ssr-compiler/src/compile-template/index.ts
@@ -24,6 +24,7 @@ import type {
 // TODO [#4663]: Render mode mismatch between template and compiler should throw.
 const bExportTemplate = esTemplate`
     export default async function* tmpl(
+            // This is where $$emit comes from
             shadowSlottedContent,
             lightSlottedContent,
             scopedSlottedContent,
@@ -50,6 +51,7 @@ const bExportTemplate = esTemplate`
         const { stylesheets: staticStylesheets } = Cmp;
         if (defaultStylesheets || defaultScopedStylesheets || staticStylesheets) {
             yield renderStylesheets(
+                $$emit,
                 defaultStylesheets, 
                 defaultScopedStylesheets, 
                 staticStylesheets,
diff --git a/packages/@lwc/ssr-runtime/src/render.ts b/packages/@lwc/ssr-runtime/src/render.ts
index ed1ddf2cc6..4bab988bdb 100644
--- a/packages/@lwc/ssr-runtime/src/render.ts
+++ b/packages/@lwc/ssr-runtime/src/render.ts
@@ -11,6 +11,7 @@ import {
     isUndefined,
     DEFAULT_SSR_MODE,
     htmlEscape,
+    type Stylesheet,
 } from '@lwc/shared';
 import { mutationTracker } from './mutation-tracker';
 import { SYMBOL__GENERATE_MARKUP } from './lightning-element';
@@ -190,10 +191,24 @@ interface ComponentWithGenerateMarkup extends LightningElementConstructor {
     [SYMBOL__GENERATE_MARKUP]?: GenerateMarkupVariants;
 }
 
+export class RenderContext {
+    styleDedupeIsEnabled: boolean;
+    stylesheetToId = new WeakMap<Stylesheet, string>();
+    styleDedupePrefix: string;
+    nextId = 0;
+
+    constructor(styleDedupePrefix: string, styleDedupeIsEnabled: boolean) {
+        this.styleDedupeIsEnabled = styleDedupeIsEnabled;
+        this.styleDedupePrefix = styleDedupePrefix;
+    }
+}
+
 export async function serverSideRenderComponent(
     tagName: string,
     Component: ComponentWithGenerateMarkup,
     props: Properties = {},
+    styleDedupePrefix = '',
+    styleDedupeIsEnabled = false,
     mode: CompilationMode = DEFAULT_SSR_MODE
 ): Promise<string> {
     if (typeof tagName !== 'string') {
@@ -207,6 +222,8 @@ export async function serverSideRenderComponent(
         markup += segment;
     };
 
+    emit.cxt = new RenderContext(styleDedupePrefix, styleDedupeIsEnabled);
+
     if (!generateMarkup) {
         // If a non-component is accidentally provided, render an empty template
         emit(`<${tagName}>`);
diff --git a/packages/@lwc/ssr-runtime/src/styles.ts b/packages/@lwc/ssr-runtime/src/styles.ts
index 5def046a00..20957feabc 100644
--- a/packages/@lwc/ssr-runtime/src/styles.ts
+++ b/packages/@lwc/ssr-runtime/src/styles.ts
@@ -8,6 +8,7 @@ import { isArray } from '@lwc/shared';
 import { validateStyleTextContents } from './validate-style-text-contents';
 import type { LightningElementConstructor } from './lightning-element';
 import type { Stylesheets, Stylesheet } from '@lwc/shared';
+import type { RenderContext } from './render';
 
 type ForgivingStylesheets =
     | Stylesheets
@@ -16,6 +17,10 @@ type ForgivingStylesheets =
     | null
     | Array<Stylesheets | undefined | null>;
 
+type EmitFn = ((strSegment: string) => void) & {
+    cxt: RenderContext;
+};
+
 // Traverse in the same order as `flattenStylesheets` but without creating unnecessary additional arrays
 function traverseStylesheets(
     stylesheets: ForgivingStylesheets,
@@ -39,6 +44,10 @@ export function hasScopedStaticStylesheets(Component: LightningElementConstructo
 }
 
 export function renderStylesheets(
+    // FIXME: the `emit` function does not exist in the SSR's compiler's yield mode. If we
+    // are going to use it to transport the RenderContext down the call stack, we'll need to figure out
+    // how to make htat work in yield mode.
+    emit: EmitFn,
     defaultStylesheets: ForgivingStylesheets,
     defaultScopedStylesheets: ForgivingStylesheets,
     staticStylesheets: ForgivingStylesheets,
@@ -57,12 +66,25 @@ export function renderStylesheets(
         const token = scoped ? scopeToken : undefined;
         const useActualHostSelector = !scoped || renderMode !== 'light';
         const useNativeDirPseudoclass = true;
+        const { styleDedupeIsEnabled, stylesheetToId, styleDedupePrefix } = emit.cxt;
 
-        const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
-        validateStyleTextContents(styleContents);
+        if (!styleDedupeIsEnabled) {
+            const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
+            validateStyleTextContents(styleContents);
+            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>`;
+        } else {
+            const styleId = emit.cxt.nextId++;
+            stylesheetToId.set(stylesheet, styleId.toString());
+            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>`;
+            // TODO [#2869]: `<style>`s should not have scope token classes
+            result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} id="lwc-style-${styleDedupePrefix}-${styleId}" type="text/css">${styleContents}</style>`;
+            result += `<lwc-style style-id="lwc-style-${styleDedupePrefix}-${styleId}"></lwc-style>`;
+        }
     };
 
     traverseStylesheets(defaultStylesheets, renderStylesheet);
diff --git a/scripts/test-utils/html-snapshot-matcher.ts b/scripts/test-utils/html-snapshot-matcher.ts
new file mode 100644
index 0000000000..137f03add0
--- /dev/null
+++ b/scripts/test-utils/html-snapshot-matcher.ts
@@ -0,0 +1,101 @@
+/**
+ * The built-in `toMatchFileSnapshot` assertion does not provide a mechanism to intercept the on-disk content
+ * (expected) prior to comparison to the in-memory content (actual). Because we want SSRv2 to be canonical
+ * vis a vis the fixtures, there needs to be a way to modify the on-disk content prior to comparing to SSRv1
+ * output.
+ *
+ * This Chai assertion provides a similar mechanism to what you get with `toMatchFileSnapshot`. If a fixture
+ * is not present on disk when the SSRv1 tests are run, a new file will be generated. And if an SSRv2 fixture
+ * is present on disk, it'll be modified to look like SSRv1 output prior to asserting equality.
+ *
+ * The one deficiency of `toMatchHtmlSnapshot` is that it doesn't support automatic snapshot updating. If you
+ * need to update a fixture and you want SSRv1 to write its output to disk, the `.html` file must first be
+ * deleted. An attempt was made to integrate with the internal Vitest plumbing to support this properly, but
+ * the necessary objects are not exposed to outside consumers.
+ *
+ * The actual transformation of SSRv2-markup to SSRv1-markup is performed in `swapLwcStyleForStyleTag`.
+ *
+ * Adapted from https://github.com/vitest-dev/vitest/blob/0c2924b7aeb7eaf1b1fa0e78d2da76a7f3197b50/packages/vitest/src/integrations/snapshot/chai.ts
+ */
+
+import * as fs from 'node:fs/promises';
+import { equals, type Assertion, type ChaiPlugin, type ExpectStatic } from '@vitest/expect';
+import { swapLwcStyleForStyleTag } from './swap-lwc-style-for-style';
+
+function createMismatchError<T = unknown>(
+    message: string,
+    expand: boolean | undefined,
+    actual: T,
+    expected: T
+) {
+    // TODO [W-17971915]: clean this up, potentially using AssertionError
+    const error = new Error(message);
+    Object.defineProperty(error, 'actual', {
+        value: actual,
+        enumerable: true,
+        configurable: true,
+        writable: true,
+    });
+    Object.defineProperty(error, 'expected', {
+        value: expected,
+        enumerable: true,
+        configurable: true,
+        writable: true,
+    });
+    Object.defineProperty(error, 'diffOptions', { value: { expand } });
+    return error;
+}
+
+async function fileExists(fpath: string) {
+    try {
+        return (await fs.stat(fpath)).isFile();
+    } catch (_err) {
+        return false;
+    }
+}
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    export namespace Chai {
+        interface Assertion {
+            toMatchHtmlSnapshot(htmlFilePath: string, expect: ExpectStatic): Promise<void>;
+        }
+    }
+}
+
+export const HtmlSnapshotPlugin: ChaiPlugin = (chai, utils) => {
+    utils.addMethod(
+        chai.Assertion.prototype,
+        'toMatchHtmlSnapshot',
+        async function (this: Assertion, htmlFilePath: string, expect: ExpectStatic) {
+            utils.flag(this, '_name', 'toMatchHtmlSnapshot');
+
+            const expectedHtml = utils.flag(this, 'object');
+            const isNot = utils.flag(this, 'negate');
+            if (isNot) {
+                throw new Error('toMatchHtmlSnapshot cannot be used with "not"');
+            }
+
+            // Leverage the built-in mechanism to write new fixtures to disk.
+            if (!(await fileExists(htmlFilePath))) {
+                return await expect(expectedHtml).toMatchFileSnapshot(htmlFilePath);
+            }
+
+            const actualHtml = await fs.readFile(htmlFilePath, 'utf8');
+            const actualHtmlCompatWithSSRv1 = swapLwcStyleForStyleTag(actualHtml);
+
+            // This isn't strictly necessary because we await the assertion in `test-fixture-dir.ts`.
+            // However, it mimics the behavior exhibited by `toMatchFileSnapshot` such that, if the
+            // assertion were not awaited, any failed assertions would be queued up and reported
+            // asynchronously after the test completed.
+            if (!equals(actualHtmlCompatWithSSRv1, expectedHtml)) {
+                throw createMismatchError(
+                    'HTML snapshot mismatch',
+                    true,
+                    actualHtmlCompatWithSSRv1,
+                    expectedHtml
+                );
+            }
+        }
+    );
+};
diff --git a/scripts/test-utils/index.ts b/scripts/test-utils/index.ts
index b2676f87ae..133eea7cf5 100644
--- a/scripts/test-utils/index.ts
+++ b/scripts/test-utils/index.ts
@@ -6,4 +6,5 @@
  */
 export * from './test-fixture-dir';
 export * from './format-html';
+export * from './swap-lwc-style-for-style';
 export { default as pluginVirtual } from '../rollup/plugin-virtual';
diff --git a/scripts/test-utils/swap-lwc-style-for-style.ts b/scripts/test-utils/swap-lwc-style-for-style.ts
new file mode 100644
index 0000000000..560bb04718
--- /dev/null
+++ b/scripts/test-utils/swap-lwc-style-for-style.ts
@@ -0,0 +1,104 @@
+/**
+ * SSRv2 implements style deduplication, where an <lwc-style> tag is inserted alongside the first instance
+ * of a given component's <style> tag. In subsequent renders of that component, only the <lwc-style> tag
+ * is present in the generated markup.
+ *
+ * This presents a problem when sharing fixtures between SSRv1 and SSRv2. SSRv1 will expect to find repeated
+ * <style> tags and won't expect to find <lwc-style> tags.
+ *
+ * The `swapLwcStyleForStyleTag` function takes the SSRv2 fixtures and modifies it to look how SSRv1 would
+ * expect. As more divergences between the implementations crop up, we may need to add more fixture mutations
+ * to accommodate the differences.
+ */
+
+interface StyleTagInfo {
+    originalStyleTag: string;
+    styleTagWithoutId: string;
+    idAttrStr: string;
+    styleId: string;
+    styleTagIdx: number;
+    indentation: number;
+}
+
+export function swapLwcStyleForStyleTag(src: string): string {
+    let modifiedSrc = src;
+    // ([leading whitespace])(<style (id="(text)")...>...</style>)
+    const styleCapture = /(\s*)(<style [^>]*(id="([^"]+)" ?)[^>]*>.*?<\/style>)/s;
+    const capturedStyleTags: StyleTagInfo[] = [];
+    let styleTagMatch: RegExpExecArray | null = null;
+
+    // Find all <style> tags with an id, remove id attrs, capture information for later
+    // replacement of <lwc-style> tags. The length of the `modifiedSrc` string will be
+    // changing as <style> tags are modified, so we need to exec each time.
+    while ((styleTagMatch = styleCapture.exec(modifiedSrc))) {
+        const [tagWithLeadingWhitespace, leadingWhiteSpace, originalStyleTag, idAttrStr, styleId] =
+            styleTagMatch;
+        const styleTagWithoutId = originalStyleTag.replace(idAttrStr, '');
+        const styleTagIdx = styleTagMatch.index;
+        // We remove the value of `styleTagWithoutId` here because it'll be added back in when the first
+        // corresponding <lwc-style> tag is replaced with <style> in the second section below.
+        modifiedSrc =
+            modifiedSrc.slice(0, styleTagIdx) +
+            modifiedSrc.slice(styleTagIdx + tagWithLeadingWhitespace.length);
+        capturedStyleTags.push({
+            originalStyleTag,
+            styleTagWithoutId,
+            idAttrStr,
+            styleId,
+            styleTagIdx,
+            indentation: leadingWhiteSpace.length,
+        });
+    }
+
+    const lwcStyleCapture = /(\s*)<lwc-style style-id="([^"]+)">[^<]*<\/lwc-style>/s;
+    const idToStyleTag = Object.fromEntries(
+        capturedStyleTags.map((styleTagInfo) => [styleTagInfo.styleId, styleTagInfo])
+    );
+    let lwcStyleTagMatch: RegExpExecArray | null = null;
+
+    // Find all <lwc-style> tags and replace them with corresponding <style> tags captured earlier.
+    // The length of the `modifiedSrc` string will be changing as <style> tags are modified, so we
+    // need to exec each time.
+    while ((lwcStyleTagMatch = lwcStyleCapture.exec(modifiedSrc))) {
+        const [tagWithLeadingWhitespace, leadingWhiteSpace, styleId] = lwcStyleTagMatch;
+        const lwcStyleTagIdx = lwcStyleTagMatch.index;
+        const correspondingStyleTagInfo = idToStyleTag[styleId];
+        if (!correspondingStyleTagInfo) {
+            throw new Error(
+                'swapLwcStyleForStyleTag was unable to find <style> tag corresponding to <lwc-style>'
+            );
+        }
+        let styleTagWithoutId = correspondingStyleTagInfo.styleTagWithoutId;
+        const indentationDelta = correspondingStyleTagInfo.indentation
+            ? leadingWhiteSpace.length - correspondingStyleTagInfo.indentation
+            : null;
+        if (indentationDelta) {
+            styleTagWithoutId = styleTagWithoutId
+                .split('\n')
+                .map((line, idx) => {
+                    if (
+                        // Don't add indentation for lines that are empty.
+                        !line ||
+                        // The first line will already be indented.
+                        idx === 0
+                    ) {
+                        return line;
+                    }
+                    // The original <style> is more indented than the <lwc-style>
+                    if (indentationDelta > 0) {
+                        return line.padStart(line.length + indentationDelta);
+                    }
+                    // The original <style> is less indented than the <lwc-style>
+                    return line.slice(-indentationDelta);
+                })
+                .join('\n');
+        }
+
+        modifiedSrc =
+            modifiedSrc.slice(0, lwcStyleTagIdx + leadingWhiteSpace.length) +
+            styleTagWithoutId +
+            modifiedSrc.slice(lwcStyleTagIdx + tagWithLeadingWhitespace.length);
+    }
+
+    return modifiedSrc;
+}
diff --git a/scripts/test-utils/test-fixture-dir.ts b/scripts/test-utils/test-fixture-dir.ts
index 982d10754a..ea834da3fb 100644
--- a/scripts/test-utils/test-fixture-dir.ts
+++ b/scripts/test-utils/test-fixture-dir.ts
@@ -8,11 +8,14 @@
 import fs, { readFileSync } from 'node:fs';
 import path from 'node:path';
 import { AssertionError } from 'node:assert';
-import { test } from 'vitest';
+import { test, chai } from 'vitest';
 import * as glob from 'glob';
+import { HtmlSnapshotPlugin } from './html-snapshot-matcher';
 
 const { globSync } = glob;
 
+chai.use(HtmlSnapshotPlugin);
+
 type TestFixtureOutput = { [filename: string]: unknown };
 
 function existsUp(dir: string, file: string): boolean {
@@ -83,6 +86,7 @@ export function testFixtureDir<T>(
     config: {
         pattern: string;
         root: string;
+        ssrVersion: number;
         expectedFailures?: Set<string>;
     },
     testFn: (options: {
@@ -100,7 +104,7 @@ export function testFixtureDir<T>(
         throw new TypeError(`Expected second argument to be a function`);
     }
 
-    const { pattern, root } = config;
+    const { pattern, root, ssrVersion } = config;
     if (!pattern || !root) {
         throw new TypeError(`Expected a "root" and a "pattern" config to be specified`);
     }
@@ -140,7 +144,15 @@ export function testFixtureDir<T>(
             for (const [outputName, content] of outputsList) {
                 const outputPath = path.resolve(dirname, outputName);
                 try {
-                    await expect(content ?? '').toMatchFileSnapshot(outputPath);
+                    // SSRv2 is now the source of truth for SSR behavior. However, there are small
+                    // intentional divergences between SSRv2 and SSRv1 rendering behavior. As such,
+                    // The fixtures on-disk need to be transformed prior to comparison with SSRv1
+                    // output. The only way to accomplish this was with a custom Chai matcher.
+                    if (ssrVersion === 1 && outputName.endsWith('.html')) {
+                        await expect(content ?? '').toMatchHtmlSnapshot(outputPath, expect);
+                    } else {
+                        await expect(content ?? '').toMatchFileSnapshot(outputPath);
+                    }
                 } catch (err) {
                     if (typeof err === 'object' && err !== null) {
                         // Hide unhelpful noise in the stack trace