From 0c52b4909829a41b9f91472ca73d32df80570ac9 Mon Sep 17 00:00:00 2001
From: Shivanshu07 <shivanshu.si@browserstack.com>
Date: Thu, 15 Oct 2026 16:46:46 +0530
Subject: [PATCH 1/2] fix(dom): drop comment nodes inside <style> when cloning
 (PER-11066)

Lit leaves empty marker comments in a <style> that contains a binding.
Since #2393 they are cloned and serialized as a literal <!----> inside the
CSS, which makes the parser drop the following declaration (display:flex
in PER-11066, collapsing a gap layout).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/dom/src/clone-dom.js           |  8 ++++++++
 packages/dom/test/serialize-css.test.js | 21 +++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/packages/dom/src/clone-dom.js b/packages/dom/src/clone-dom.js
index ac131feb9..4cce590ac 100644
--- a/packages/dom/src/clone-dom.js
+++ b/packages/dom/src/clone-dom.js
@@ -62,6 +62,14 @@ export function cloneNodeAndShadow(ctx) {
         }
       };
 
+      // A comment inside a <style> is raw text, not markup: templating libraries
+      // such as Lit leave empty marker comments there around bindings. Cloned, it
+      // serializes as a literal `<!---->` in the CSS, which the parser reads as a
+      // CDO/CDC token that swallows the declaration after it (PER-11066).
+      if (node.nodeType === 8 /* COMMENT_NODE */ && /^style$/i.test(node.parentNode.nodeName)) {
+        return;
+      }
+
       if (node.nodeName === 'BASE') {
         let clone = node.cloneNode(false);
         parent.appendChild(clone);
diff --git a/packages/dom/test/serialize-css.test.js b/packages/dom/test/serialize-css.test.js
index e9edb61ea..2d318ed62 100644
--- a/packages/dom/test/serialize-css.test.js
+++ b/packages/dom/test/serialize-css.test.js
@@ -552,5 +552,26 @@ describe('serializeCSSOM', () => {
       expect(clonedStyle.innerHTML).toBe(liveText);
       expect(clonedStyle.getAttribute('data-percy-cssom-serialized')).toBeNull();
     });
+
+    it('drops comment nodes inside <style>, keeping the declarations around them (PER-11066)', () => {
+      // Lit renders `<style>.grid { ${css} }</style>` with empty marker comments
+      // around the binding; serialized as `<!---->` they make `display: flex` drop.
+      withExample('<style id="lit-markers"></style><div class="grid"></div>', { withShadow: false });
+
+      let liveStyle = document.getElementById('lit-markers');
+      liveStyle.append(
+        '.grid {\n',
+        document.createComment(''),
+        ' display: flex; gap: 16px; }',
+        document.createComment('')
+      );
+      expect(getComputedStyle(document.querySelector('.grid')).display).toBe('flex');
+
+      let $ = parseDOM(serializeDOM(), 'plain');
+      let clonedStyle = $('#lit-markers')[0];
+
+      expect(clonedStyle.innerHTML).not.toContain('<!--');
+      expect(clonedStyle.innerHTML).toBe(liveStyle.textContent);
+    });
   });
 });

From f911f2825b39e600468f5a155fc241b67ba984eb Mon Sep 17 00:00:00 2001
From: Shivanshu07 <shivanshu.si@browserstack.com>
Date: Thu, 15 Oct 2026 16:50:18 +0530
Subject: [PATCH 2/2] test(dom): use window.getComputedStyle in PER-11066 test
 (no-undef)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/dom/test/serialize-css.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dom/test/serialize-css.test.js b/packages/dom/test/serialize-css.test.js
index 2d318ed62..44a05b63c 100644
--- a/packages/dom/test/serialize-css.test.js
+++ b/packages/dom/test/serialize-css.test.js
@@ -565,7 +565,7 @@ describe('serializeCSSOM', () => {
         ' display: flex; gap: 16px; }',
         document.createComment('')
       );
-      expect(getComputedStyle(document.querySelector('.grid')).display).toBe('flex');
+      expect(window.getComputedStyle(document.querySelector('.grid')).display).toBe('flex');
 
       let $ = parseDOM(serializeDOM(), 'plain');
       let clonedStyle = $('#lit-markers')[0];