Cleanup InjectDeclarativeShadowDOMPolyfill script (#1579)

* Inject DeclarativeShadowDOMPolyfill script directly to clone * Remove extra changes * Fallback to clone if head node is missing * Release alpha * Cleanup DeclarativeShadowDOMPolyfill script * Fix tests
percy · Apr 24, 2024 · aa60828 · aa60828
1 parent 6f2c2bd
commit aa60828
Show file tree

Hide file tree

Showing 5 changed files with 1 addition and 90 deletions.
diff --git a/packages/dom/src/inject-polyfill.js b/packages/dom/src/inject-polyfill.js
diff --git a/packages/dom/src/serialize-dom.js b/packages/dom/src/serialize-dom.js
@@ -4,7 +4,6 @@ import serializeCSSOM from './serialize-cssom';
 import serializeCanvas from './serialize-canvas';
 import serializeVideos from './serialize-video';
 import { cloneNodeAndShadow, getOuterHTML } from './clone-dom';
-import injectDeclarativeShadowDOMPolyfill from './inject-polyfill';
 
 // Returns a copy or new doctype for a document.
 function doctype(dom) {
@@ -95,7 +94,6 @@ export function serializeDOM(options) {
     }
   }
 
-  if (!disableShadowDOM) { injectDeclarativeShadowDOMPolyfill(ctx); }
   if (reshuffleInvalidTags) {
     let clonedBody = ctx.clone.body;
     while (clonedBody.nextSibling) {

diff --git a/packages/dom/src/serialize-frames.js b/packages/dom/src/serialize-frames.js
@@ -9,7 +9,7 @@ function setBaseURI(dom) {
   let $base = document.createElement('base');
   $base.href = dom.baseURI;
 
-  dom.querySelector('head').prepend($base);
+  dom.querySelector('head')?.prepend($base);
 }
 
 // Recursively serializes iframe documents into srcdoc attributes.

diff --git a/packages/dom/test/inject-polyfill.test.js b/packages/dom/test/inject-polyfill.test.js
diff --git a/packages/dom/test/serialize-frames.test.js b/packages/dom/test/serialize-frames.test.js
@@ -98,7 +98,6 @@ describe('serializeFrames', () => {
       expect($('#frame-js')[0].getAttribute('src')).toBeNull();
       expect($('#frame-js')[0].getAttribute('srcdoc')).toMatch(new RegExp([
         '<!DOCTYPE html><html><head>',
-        '<script id="__percy_shadowdom_helper" data-percy-injected="true">.*</script>',
         `<base href="${dom.querySelector('#frame-js').baseURI}">`,
         '</head><body>',
         '<p>made with js src</p>',
@@ -108,7 +107,6 @@ describe('serializeFrames', () => {
       expect($('#frame-js-no-src')[0].getAttribute('src')).toBeNull();
       expect($('#frame-js-no-src')[0].getAttribute('srcdoc')).toMatch([
         '<!DOCTYPE html><html><head>',
-        '<script id="__percy_shadowdom_helper" data-percy-injected="true">.*</script>',
         `<base href="${dom.querySelector('#frame-js-no-src').baseURI}">`,
         '</head><body>',
         '<p>generated iframe</p>',
@@ -127,7 +125,6 @@ describe('serializeFrames', () => {
     it(`${platform}: serializes iframes that have been interacted with`, () => {
       expect($('#frame-input')[0].getAttribute('srcdoc')).toMatch(new RegExp([
         '^<!DOCTYPE html><html><head>',
-        '<script id="__percy_shadowdom_helper" data-percy-injected="true">.*</script>',
         '.*?</head><body>',
         '<input data-percy-element-id=".+?" value="iframe with an input">',
         '</body></html>$'