add force option and use in DSD testing

Steve Orvell · Steve Orvell · commit 7db7ff77d81c · 2026-03-13T11:39:36.000-07:00
diff --git a/packages/scoped-custom-element-registry/src/scoped-custom-element-registry.ts b/packages/scoped-custom-element-registry/src/scoped-custom-element-registry.ts
@@ -21,6 +21,7 @@
 
 declare interface PolyfillWindow {
   CustomElementRegistryPolyfill: {
+    force?: boolean;
     formAssociated: Set<string>;
     nativeRegistry: CustomElementRegistry;
     hasCustomElementRegistry: boolean;
@@ -50,6 +51,8 @@ polyfillWindow['CustomElementRegistryPolyfill'][
   'formAssociated'
 ] ??= new Set<string>();
 
+const {force} = polyfillWindow['CustomElementRegistryPolyfill'];
+
 Object.assign(
   polyfillWindow['CustomElementRegistryPolyfill'],
   (() => {
@@ -68,7 +71,7 @@ Object.assign(
     return {
       'hasCustomElementRegistry': reg,
       'hasNullCustomElementRegistry': nullReg,
-      'inUse': !(reg && nullReg),
+      'inUse': force || !(reg && nullReg),
     };
   })()
 );
@@ -153,19 +156,26 @@ type ParametersOf<
 // Use an IIFE to prevent polyfill use if native scoped registries are detected
 (() => {
   const {
+    ['force']: force,
     ['inUse']: inUse,
     ['hasCustomElementRegistry']: hasCustomElementRegistry,
     ['hasNullCustomElementRegistry']: hasNullCustomElementRegistry,
   } = polyfillWindow['CustomElementRegistryPolyfill'];
   console.warn(
-    `Scoped custom element registries polyfill ${
-      hasCustomElementRegistry
-        ? `detected browser support ${
-            hasNullCustomElementRegistry
-              ? `and did not load.`
-              : `but loaded because null registry support was not detected.`
+    `Scoped custom element registries polyfill is ${
+      inUse ? 'in use' : 'not in use'
+    }. ${
+      force
+        ? 'The "force" flag was set to true.'
+        : `The polyfill ${
+            hasCustomElementRegistry
+              ? `detected browser support ${
+                  hasNullCustomElementRegistry
+                    ? `and did not load.`
+                    : `but loaded because null registry support was not detected.`
+                }`
+              : 'did *not* detect browser support and loaded.'
           }`
-        : 'did *not* detect browser support and loaded.'
     }`
   );
   if (!inUse) {
diff --git a/packages/scoped-custom-element-registry/test/DeclarativeShadowRoot.test.html b/packages/scoped-custom-element-registry/test/DeclarativeShadowRoot.test.html
@@ -1,13 +1,19 @@
 <html>
   <body>
+    <script>
+      window.CustomElementRegistryPolyfill = {
+        force: true,
+      };
+    </script>
     <script src="../scoped-custom-element-registry.min.js"></script>
     <div id="host1">
       <template shadowrootmode="open">
         <dsd-element></dsd-element>
       </template>
     </div>
     <div id="host2" polyfill-shadowrootcustomelementregistry>
-      <template shadowrootmode="open" Xshadowrootcustomelementregistry>
+      <!-- note, cannot use native attribute here if browser has native support -->
+      <template shadowrootmode="open">
         <dsd-element></dsd-element>
       </template>
     </div>
diff --git a/packages/scoped-custom-element-registry/test/DeclarativeShadowRoot.test.html.js b/packages/scoped-custom-element-registry/test/DeclarativeShadowRoot.test.html.js
@@ -12,11 +12,7 @@ describe('Declarative ShadowRoot', () => {
     expect(ce).to.be.instanceOf(customElements.get(ce.localName));
   });
 
-  it(`should *not* customize elements in null registry, should be browser ${
-    navigator.userAgent
-  } and polyfill ${JSON.stringify(
-    window.CustomElementRegistryPolyfill
-  )}`, () => {
+  it('should *not* customize elements in null registry', () => {
     const host = document.getElementById('host2');
     expect(host.shadowRoot).not.to.be.null;
     expect(host.shadowRoot.customElementRegistry).to.be.null;
