From 50d40338dc9fae42fef211cd5cc74b74c66436af Mon Sep 17 00:00:00 2001
From: amit3200 <tusharamit@yahoo.com>
Date: Tue, 26 Nov 2024 03:59:29 +0530
Subject: [PATCH 1/5] Shadowroot support using getHTML

---
 packages/dom/src/clone-dom.js           | 12 +++++++++---
 packages/dom/test/serialize-css.test.js |  6 +++---
 packages/dom/test/serialize-dom.test.js | 12 ++++++------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/dom/src/clone-dom.js b/packages/dom/src/clone-dom.js
index d63679f54..99a9a5a24 100644
--- a/packages/dom/src/clone-dom.js
+++ b/packages/dom/src/clone-dom.js
@@ -54,7 +54,8 @@ export function cloneNodeAndShadow(ctx) {
           clone.shadowRoot.innerHTML = '';
         } else {
           clone.attachShadow({
-            mode: 'open'
+            mode: 'open',
+            serializable: true
           });
         }
         // clone dom elements
@@ -85,9 +86,14 @@ export function cloneNodeAndShadow(ctx) {
  */
 export function getOuterHTML(docElement) {
   // firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
-  if (!docElement.getInnerHTML) { return docElement.outerHTML; }
+  if (!docElement.getHTML) { return docElement.outerHTML; }
   // chromium gives us declarative shadow DOM serialization API
-  let innerHTML = docElement.getInnerHTML({ includeShadowRoots: true });
+  let innerHTML = '';
+  if (docElement.getInnerHTML) {
+    innerHTML = docElement.getInnerHTML({ includeShadowRoots: true });
+  } else if (docElement.getHTML) {
+    innerHTML = docElement.getHTML({ serializableShadowRoots: true });
+  }
   docElement.textContent = '';
   // Note: Here we are specifically passing replacer function to avoid any replacements due to
   // special characters in client's dom like $&
diff --git a/packages/dom/test/serialize-css.test.js b/packages/dom/test/serialize-css.test.js
index 2012b4ebf..ea0bbebc8 100644
--- a/packages/dom/test/serialize-css.test.js
+++ b/packages/dom/test/serialize-css.test.js
@@ -118,7 +118,7 @@ describe('serializeCSSOM', () => {
         }]));
 
         expect(resultShadowEl.innerHTML).toEqual([
-          '<template shadowrootmode="open">',
+          '<template shadowrootmode="open" shadowrootserializable="">',
           `<link rel="stylesheet" data-percy-adopted-stylesheets-serialized="true" href="${capture.resources[0].url}">`,
           '<p>Percy-0</p>',
           '</template>'
@@ -157,14 +157,14 @@ describe('serializeCSSOM', () => {
         const resultShadowElChild = $('#Percy-1')[0];
 
         expect(resultShadowEl.innerHTML).toMatch([
-          '<template shadowrootmode="open">',
+          '<template shadowrootmode="open" shadowrootserializable="">',
           `<link rel="stylesheet" data-percy-adopted-stylesheets-serialized="true" href="${capture.resources[0].url}">`,
           '<p>Percy-0</p>',
           '</template>'
         ].join(''));
 
         expect(resultShadowElChild.innerHTML).toMatch([
-          '<template shadowrootmode="open">',
+          '<template shadowrootmode="open" shadowrootserializable="">',
           `<link rel="stylesheet" data-percy-adopted-stylesheets-serialized="true" href="${capture.resources[1].url}">`,
           `<link rel="stylesheet" data-percy-adopted-stylesheets-serialized="true" href="${capture.resources[0].url}">`,
           '<p>Percy-1</p>',
diff --git a/packages/dom/test/serialize-dom.test.js b/packages/dom/test/serialize-dom.test.js
index bac17f7cd..13042d054 100644
--- a/packages/dom/test/serialize-dom.test.js
+++ b/packages/dom/test/serialize-dom.test.js
@@ -125,7 +125,7 @@ describe('serializeDOM', () => {
       shadow.appendChild(paragraphEl);
 
       const html = serializeDOM().html;
-      expect(html).toMatch('<template shadowrootmode="open">');
+      expect(html).toMatch('<template shadowrootmode="open" shadowrootserializable="">');
       expect(html).toMatch('Hey Percy!');
     });
 
@@ -162,10 +162,10 @@ describe('serializeDOM', () => {
       const html = serializeDOM().html;
 
       expect(html).toMatch(new RegExp([
-        '<template shadowrootmode="open">',
+        '<template shadowrootmode="open" shadowrootserializable="">',
         '<p>Percy-1</p>',
         '<div id="Percy-2" .*>',
-        '<template shadowrootmode="open">',
+        '<template shadowrootmode="open" shadowrootserializable="">',
         '<p>Percy-2</p>',
         '</template>'
       ].join('')));
@@ -193,7 +193,7 @@ describe('serializeDOM', () => {
         el = newEl;
         matchRegex += [
           `<div id="Percy-${j}" .*>`,
-          '<template shadowrootmode="open">',
+          '<template shadowrootmode="open" shadowrootserializable="">',
           `<p>Percy-${j}</p>`
         ].join('');
       }
@@ -218,7 +218,7 @@ describe('serializeDOM', () => {
         baseContent.appendChild(newEl);
         matchRegex += [
           `<div id="Percy-${j}" .*>`,
-          '<template shadowrootmode="open">',
+          '<template shadowrootmode="open" shadowrootserializable="">',
           `<p>Percy-${j}</p>`,
           '</template>',
           '</div>'
@@ -251,7 +251,7 @@ describe('serializeDOM', () => {
         constructor() {
           super();
           // Create a shadow root
-          const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
+          const shadow = this.shadowRoot || this.attachShadow({ mode: 'open', serializable: true });
           const wrapper = document.createElement('h2');
           wrapper.innerText = 'Test';
           shadow.appendChild(wrapper);

From f92211bf9a9bcbdd3b4e41f8c9c92e5a814c9ba2 Mon Sep 17 00:00:00 2001
From: amit3200 <tusharamit@yahoo.com>
Date: Tue, 26 Nov 2024 04:09:06 +0530
Subject: [PATCH 2/5] Removing backward compatability for getInnerHTML

---
 packages/dom/src/clone-dom.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/dom/src/clone-dom.js b/packages/dom/src/clone-dom.js
index 99a9a5a24..d8be0448f 100644
--- a/packages/dom/src/clone-dom.js
+++ b/packages/dom/src/clone-dom.js
@@ -88,12 +88,7 @@ export function getOuterHTML(docElement) {
   // firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
   if (!docElement.getHTML) { return docElement.outerHTML; }
   // chromium gives us declarative shadow DOM serialization API
-  let innerHTML = '';
-  if (docElement.getInnerHTML) {
-    innerHTML = docElement.getInnerHTML({ includeShadowRoots: true });
-  } else if (docElement.getHTML) {
-    innerHTML = docElement.getHTML({ serializableShadowRoots: true });
-  }
+  let innerHTML = docElement.getHTML({ serializableShadowRoots: true });
   docElement.textContent = '';
   // Note: Here we are specifically passing replacer function to avoid any replacements due to
   // special characters in client's dom like $&

From 3710427158ef708067f1edd2c2a3b8f6b37d9433 Mon Sep 17 00:00:00 2001
From: amit3200 <tusharamit@yahoo.com>
Date: Tue, 26 Nov 2024 04:15:32 +0530
Subject: [PATCH 3/5] Removing checks for innerHTML

---
 packages/dom/src/clone-dom.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/dom/src/clone-dom.js b/packages/dom/src/clone-dom.js
index d8be0448f..13f3f0942 100644
--- a/packages/dom/src/clone-dom.js
+++ b/packages/dom/src/clone-dom.js
@@ -81,13 +81,9 @@ export function cloneNodeAndShadow(ctx) {
   return fragment;
 };
 
-/**
- * Use `getInnerHTML()` to serialize shadow dom as <template> tags. `innerHTML` and `outerHTML` don't do this. Buzzword: "declarative shadow dom"
- */
 export function getOuterHTML(docElement) {
-  // firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
-  if (!docElement.getHTML) { return docElement.outerHTML; }
-  // chromium gives us declarative shadow DOM serialization API
+  // getHTML is standard way of getting serialized DOM and is supported across all major browsers
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/getHTML
   let innerHTML = docElement.getHTML({ serializableShadowRoots: true });
   docElement.textContent = '';
   // Note: Here we are specifically passing replacer function to avoid any replacements due to

From 3c9bd5d75f327e51bb74eacae8e373c62d7aff10 Mon Sep 17 00:00:00 2001
From: amit3200 <tusharamit@yahoo.com>
Date: Tue, 26 Nov 2024 04:25:47 +0530
Subject: [PATCH 4/5] Adding back the backward compatability for tests

---
 packages/dom/src/clone-dom.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/dom/src/clone-dom.js b/packages/dom/src/clone-dom.js
index 13f3f0942..4628b29b3 100644
--- a/packages/dom/src/clone-dom.js
+++ b/packages/dom/src/clone-dom.js
@@ -81,10 +81,21 @@ export function cloneNodeAndShadow(ctx) {
   return fragment;
 };
 
+/**
+ * Use `getInnerHTML()` to serialize shadow dom as <template> tags. `innerHTML` and `outerHTML` don't do this. Buzzword: "declarative shadow dom"
+ */
 export function getOuterHTML(docElement) {
-  // getHTML is standard way of getting serialized DOM and is supported across all major browsers
+  // All major browsers in latest versions supports getHTML API to get serialized DOM
   // https://developer.mozilla.org/en-US/docs/Web/API/Element/getHTML
-  let innerHTML = docElement.getHTML({ serializableShadowRoots: true });
+  // firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
+  if (!docElement.getHTML) { return docElement.outerHTML; }
+  // chromium gives us declarative shadow DOM serialization API
+  let innerHTML = '';
+  if (docElement.getHTML) {
+    innerHTML = docElement.getHTML({ serializableShadowRoots: true });
+  } else if (docElement.getInnerHTML) {
+    innerHTML = docElement.getInnerHTML({ includeShadowRoots: true });
+  }
   docElement.textContent = '';
   // Note: Here we are specifically passing replacer function to avoid any replacements due to
   // special characters in client's dom like $&

From 7e30e05901cd4d08852736bfd95d0b0229725dac Mon Sep 17 00:00:00 2001
From: amit3200 <tusharamit@yahoo.com>
Date: Tue, 26 Nov 2024 16:43:41 +0530
Subject: [PATCH 5/5] Fixing Test Coverage

---
 packages/dom/src/clone-dom.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/dom/src/clone-dom.js b/packages/dom/src/clone-dom.js
index 4628b29b3..938d54f21 100644
--- a/packages/dom/src/clone-dom.js
+++ b/packages/dom/src/clone-dom.js
@@ -87,10 +87,13 @@ export function cloneNodeAndShadow(ctx) {
 export function getOuterHTML(docElement) {
   // All major browsers in latest versions supports getHTML API to get serialized DOM
   // https://developer.mozilla.org/en-US/docs/Web/API/Element/getHTML
-  // firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
+  // old firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
+  // new firefox from 128 onwards serializes it using getHTML
+  /* istanbul ignore if: Only triggered in firefox <= 128 and tests runs on latest */
   if (!docElement.getHTML) { return docElement.outerHTML; }
   // chromium gives us declarative shadow DOM serialization API
   let innerHTML = '';
+  /* istanbul ignore else if: Only triggered in chrome <= 128 and tests runs on latest */
   if (docElement.getHTML) {
     innerHTML = docElement.getHTML({ serializableShadowRoots: true });
   } else if (docElement.getInnerHTML) {