Bug 1853679 - Use polyfill the declarative shadow DOM function for related popover tests. r=emilio

Differential Revision: https://phabricator.services.mozilla.com/D188464

testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-flat-tree.html

@@ -26,6 +26,7 @@
     <script src="resources/popover-utils.js"></script>
     <script>
         promise_test(async () => {
+            polyfill_declarative_shadow_dom(outerPopover);
             const innerPopoverToggle = outerPopover.shadowRoot.querySelector("#innerPopoverToggle");
             const innerPopover = outerPopover.shadowRoot.querySelector("#innerPopover");
 

testing/web-platform/tests/html/semantics/popovers/popover-shadowhost-focus.html

@@ -3,6 +3,7 @@
 <link rel=help href="https://github.com/whatwg/html/issues/8994">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 
 <div popover=auto tabindex=0 data-test="autofocus=true, delegatesfocus=false" autofocus class=should-be-focused>
   <template shadowrootmode=open>
@@ -31,16 +32,7 @@
 </div>
 
 <script>
-(function attachShadowRoots(root) {
-  root.querySelectorAll("template[shadowrootmode]").forEach(template => {
-    const mode = template.getAttribute("shadowrootmode");
-    const delegatesFocus = template.hasAttribute("shadowrootdelegatesfocus");
-    const shadowRoot = template.parentNode.attachShadow({ mode, delegatesFocus });
-    shadowRoot.appendChild(template.content);
-    template.remove();
-    attachShadowRoots(shadowRoot);
-  });
-})(document);
+polyfill_declarative_shadow_dom(document);
 
 document.querySelectorAll('body > [popover]').forEach(popover => {
   promise_test(async () => {