feat(polyfills-loader): add support for Scoped CustomElementRegistry polyfill

Author: tmsns

.changeset/neat-toes-nail.md

@@ -0,0 +1,5 @@
+---
+'@web/polyfills-loader': minor
+---
+
+add support for the Scoped CustomElementRegistry polyfill (this is a prototype polyfill)

docs/docs/building/polyfills-loader.md

@@ -154,6 +154,7 @@ The polyfills config controls which polyills are injected onto the page. These a
 - [dynamicImport](https://github.com/GoogleChromeLabs/dynamic-import-polyfill)
 - [esModuleShims](https://github.com/guybedford/es-module-shims)
 - [shadyCssCustomStyle](https://github.com/webcomponents/polyfills/blob/master/packages/shadycss/custom-style-interface.html) (you must also include webcomponents)
+- [scopedCustomElementRegistry](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry)
 
 They can be turned on using booleans. When using the polyfills loader directly, these are default false. Other tools may turn on different defaults.
 

packages/polyfills-loader/README.md

@@ -80,6 +80,7 @@ const config = {
     constructibleStylesheets: true,
     URLPattern: true,
     resizeObserver: true,
+    scopedCustomElementRegistry: true,
   },
   minify: true,
 };
@@ -157,6 +158,7 @@ The polyfills config controls which polyills are injected onto the page. These a
 - [constructibleStylesheets](https://github.com/calebdwilliams/construct-style-sheets)
 - [URLPattern](https://github.com/kenchris/urlpattern-polyfill)
 - [shadyCssCustomStyle](https://github.com/webcomponents/polyfills/blob/master/packages/shadycss/custom-style-interface.html) (you must also include webcomponents)
+- [scopedCustomElementRegistry](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry)
 
 They can be turned on using booleans. When using the polyfills loader directly, these are default false. Other tools may turn on different defaults.
 

packages/polyfills-loader/package.json

@@ -47,6 +47,7 @@
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@web/parse5-utils": "^2.0.0",
+    "@webcomponents/scoped-custom-element-registry": "^0.0.9",
     "@webcomponents/shadycss": "^1.11.0",
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "abortcontroller-polyfill": "^1.5.0",

packages/polyfills-loader/src/createPolyfillsData.ts

@@ -153,6 +153,16 @@ export async function createPolyfillsData(cfg: PolyfillsLoaderConfig): Promise<P
     });
   }
 
+  if (polyfills.scopedCustomElementRegistry) {
+    addPolyfillConfig({
+      name: 'scoped-custom-element-registry',
+      test: "!('createElement' in ShadowRoot.prototype)",
+      path: require.resolve(
+        '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js',
+      ),
+    });
+  }
+
   if (polyfills.webcomponents && !polyfills.shadyCssCustomStyle) {
     addPolyfillConfig({
       name: 'webcomponents',

packages/polyfills-loader/src/types.ts

@@ -52,6 +52,7 @@ export interface PolyfillsConfig {
   constructibleStylesheets?: boolean;
   // shady-css-custom-style and shady-css-scoped-element
   shadyCssCustomStyle?: boolean;
+  scopedCustomElementRegistry?: boolean;
 }
 
 export interface PolyfillConfig {

packages/polyfills-loader/test/createPolyfillsData.test.ts

@@ -34,6 +34,7 @@ describe('polyfills', () => {
         esModuleShims: true,
         constructibleStylesheets: true,
         URLPattern: true,
+        scopedCustomElementRegistry: true,
       },
     };
 
@@ -102,6 +103,13 @@ describe('polyfills', () => {
         content: '',
         type: 'script',
       },
+      {
+        name: 'scoped-custom-element-registry',
+        path: 'polyfills/scoped-custom-element-registry.js',
+        test: "!('createElement' in ShadowRoot.prototype)",
+        content: '',
+        type: 'script',
+      },
       {
         name: 'webcomponents',
         path: 'polyfills/webcomponents.js',

yarn.lock

@@ -3083,6 +3083,11 @@
   resolved "https://registry.yarnpkg.com/@web/storybook-prebuilt/-/storybook-prebuilt-0.1.34.tgz#993ee48a287f10e98adac55a6bab8e596a1ba228"
   integrity sha512-03IvmZNfWK1FO9WQn71uCmzbLorNpzqJNV3L2bx85ND8Gg7CqnFxBKOhEeh5JAbqU2j+JGRgTvsZPusGjng38g==
 
+"@webcomponents/scoped-custom-element-registry@^0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@webcomponents/scoped-custom-element-registry/-/scoped-custom-element-registry-0.0.9.tgz#dd6ea3378bfeaea64d0c7542120e0ffd17b48b0e"
+  integrity sha512-4RVHwN9oIp23mhrxeDbP9/0wvdcrB0d/MFMqIStShIgfzsqXZXf1OdU5kvqjgdMYavQ5Zm8C6BuBcAjzNwAetQ==
+
 "@webcomponents/shadycss@^1.11.0":
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/@webcomponents/shadycss/-/shadycss-1.11.2.tgz#7539b0ad29598aa2eafee8b341059e20ac9e1006"