feat: add the 'lit' option that can be passed to the shadow-dom featu…

…re or any of its aliases such as web-components to include its polyfill support layer

README.md

@@ -294,7 +294,10 @@ For example: `systemjs|variant=s` selects the _s_ variant, while `systemjs|varia
 
 #### Extra options for `shadow-dom`
 
-You can pass the `experimental` option to `shadow-dom` (or any of its aliases such as `web-components`) to base it on some experimental features that may reduce bugs in older browsers such as IE and Edge <= 15.
+| Option           | Description                                                                                        |
+| ---------------- | -------------------------------------------------------------------------------------------------- |
+| `experimental`   | You can pass the `experimental` option to `shadow-dom` (or any of its aliases such as `web-components`) to base it on some experimental features that may reduce bugs in older browsers such as IE and Edge <= 15.                                                                                  |
+| `lit`            | If you're going to be using [Lit](https://lit.dev/), you can also pass the `lit` option to `shadow-dom` (or any of its aliases such as `web-components`) to include its [polyfill support layer](https://lit.dev/docs/releases/upgrade/#load-polyfill-support-when-using-web-components-polyfills). |
 
 ### Usage in a Web Worker/Service Worker
 

package.json

@@ -92,6 +92,7 @@
 		"@wessberg/di": "2.0.3",
 		"@wessberg/pointer-events": "1.0.9",
 		"@wessberg/stringutil": "1.0.19",
+		"lit": "2.2.3",
 		"Base64": "1.1.0",
 		"blob-polyfill": "5.0.20210201",
 		"browserslist": "4.17.1",

src/constant/constant.ts

@@ -3051,6 +3051,9 @@ export const constant: IConstant = {
 					"node_modules/@webcomponents/shadydom/src/shadydom.js",
 					"polyfill-lib/@webcomponents/shadycss-experimental/entrypoints/scoping-shim.js",
 					"polyfill-lib/@webcomponents/shadycss-experimental/entrypoints/custom-style-interface.js"
+				],
+				lit: [
+					"node_modules/lit/polyfill-support.js",
 				]
 			},
 			features: ["shadowdomv1"],

src/service/polyfill-builder/polyfill-builder-service.ts

@@ -75,10 +75,7 @@ export class PolyfillBuilderService implements IPolyfillBuilderService {
 						throw new ReferenceError(`Unresolved path: '${metaVariantPathInput}'`);
 					}
 				}
-			}
-
-			// If shadow-dom is requested, the variant to use may be provided as metadata. If so, we should use that one, rather than the relativePaths
-			else if (
+			} else if (
 				polyfillFeature.name === "shadow-dom" &&
 				meta != null &&
 				polyfillFeature.meta != null &&
@@ -110,6 +107,18 @@ export class PolyfillBuilderService implements IPolyfillBuilderService {
 				}
 			}
 
+			if (meta != null && polyfillFeature.name === "shadow-dom" && polyfillFeature.meta?.lit === true) {
+				for (const filePath of selectMetaPaths(meta.lit, request.context)) {
+					const filePathInput = join(rootDirectory, filePath);
+					const resolvedFilePath = sync(filePathInput, SYNC_OPTIONS);
+					if (resolvedFilePath != null) {
+						absolutePaths.push(resolvedFilePath);
+					} else {
+						throw new ReferenceError(`Unresolved path: '${filePathInput}'`);
+					}
+				}
+			}
+
 			if (meta != null && polyfillFeature.name === "zone") {
 				// If Zone is requested, 'zone-error' may be requested which improves the produced Stack trace when using Zone
 				if (polyfillFeature.meta != null && polyfillFeature.meta.error === true) {

test/api/api.test.ts

@@ -272,11 +272,11 @@ test("Accepts OPTIONS requests. #1", async t => {
 });
 
 test("Will correctly parse meta information for 'shadow-dom'. #1", async t => {
-	const polyfillRequest = getPolyfillRequestFromUrl(new URL("?features=shadow-dom|experimental", `https://my-polyfill-service.app${constant.endpoint.polyfill}`), chrome(70));
-	t.true([...polyfillRequest.features].some(({meta, name}) => name === "shadow-dom" && meta != null && meta.experimental === true));
+	const polyfillRequest = getPolyfillRequestFromUrl(new URL("?features=shadow-dom|experimental|lit", `https://my-polyfill-service.app${constant.endpoint.polyfill}`), chrome(70));
+	t.true([...polyfillRequest.features].some(({meta, name}) => name === "shadow-dom" && meta != null && meta.experimental === true && meta.lit === true));
 });
 
 test("Will correctly parse meta information for 'shadow-dom' when using the alias 'web-components'. #1", async t => {
-	const polyfillRequest = getPolyfillRequestFromUrl(new URL("?features=web-components|experimental", `https://my-polyfill-service.app${constant.endpoint.polyfill}`), chrome(70));
-	t.true([...polyfillRequest.features].some(({meta, name}) => name === "shadow-dom" && meta != null && meta.experimental === true));
+	const polyfillRequest = getPolyfillRequestFromUrl(new URL("?features=web-components|experimental|lit", `https://my-polyfill-service.app${constant.endpoint.polyfill}`), chrome(70));
+	t.true([...polyfillRequest.features].some(({meta, name}) => name === "shadow-dom" && meta != null && meta.experimental === true && meta.lit === true));
 });