diff --git a/package.json b/package.json
index 1585b1122f..4eb8632a12 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "eslint-plugin-compat": "^5.0.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-tsdoc": "^0.2.17",
+    "happy-dom": "^14.12.0",
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.31.1",
     "prettier": "2.8.4",
diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
index 9a996620bb..ef0666b287 100644
--- a/packages/rrdom/package.json
+++ b/packages/rrdom/package.json
@@ -46,7 +46,6 @@
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "eslint": "^8.15.0",
-    "happy-dom": "^14.12.0",
     "puppeteer": "^17.1.3",
     "typescript": "^5.4.5",
     "vite": "^5.3.1",
diff --git a/packages/rrweb-snapshot/test/css.test.ts b/packages/rrweb-snapshot/test/css.test.ts
index 3919538082..b784da1405 100644
--- a/packages/rrweb-snapshot/test/css.test.ts
+++ b/packages/rrweb-snapshot/test/css.test.ts
@@ -13,6 +13,7 @@ import {
   type BuildCache,
   type textNode,
 } from '../src/types';
+import { Window } from 'happy-dom';
 
 describe('css parser', () => {
   function parse(plugin: AcceptedPlugin, input: string): string {
@@ -88,11 +89,13 @@ li[attr="has,comma"] a.\\:hover {background: red;}`,
 
 describe('css splitter', () => {
   it('finds css textElement splits correctly', () => {
-    const style = JSDOM.fragment(`<style></style>`).querySelector('style');
+    const window = new Window({ url: 'https://localhost:8080' });
+    const document = window.document;
+    document.head.innerHTML = '<style>.a{background-color:red;}</style>';
+    const style = document.querySelector('style');
     if (style) {
       // as authored, e.g. no spaces
-      style.appendChild(JSDOM.fragment('.a{background-color:red;}'));
-      style.appendChild(JSDOM.fragment('.a{background-color:black;}'));
+      style.append('.a{background-color:black;}');
 
       // how it is currently stringified (spaces present)
       const expected = [
@@ -100,8 +103,7 @@ describe('css splitter', () => {
         '.a { background-color: black; }',
       ];
       const browserSheet = expected.join('');
-      // can't do this as JSDOM doesn't have style.sheet
-      //expect(stringifyStylesheet(style.sheet!)).toEqual(browserSheet);
+      expect(stringifyStylesheet(style.sheet!)).toEqual(browserSheet);
 
       expect(splitCssText(browserSheet, style)).toEqual(expected);
     }
@@ -133,6 +135,7 @@ describe('css splitter', () => {
       const browserSheet = expected.join('');
 
       // can't do this as JSDOM doesn't have style.sheet
+      // also happy-dom doesn't strip out vendor-prefixed rules like a real browser does
       //expect(stringifyStylesheet(style.sheet!)).toEqual(browserSheet);
 
       expect(splitCssText(browserSheet, style)).toEqual(expected);