feat: add template-shadowroot polyfill (#16)

Co-authored-by: Dominique Wirz <[email protected]>
smartive · Oct 17, 2023 · 9ac5ad7 · 9ac5ad7
1 parent 3214f44
commit 9ac5ad7
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 73 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -23,6 +23,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@webcomponents/template-shadowroot": "^0.2.1",
     "abc-web-components-react-wrapper": "^0.0.0",
     "next": "13.5.5",
     "react": "18.2.0",

diff --git a/packages/app/public/scripts/polyfills/template-shadowroot.js b/packages/app/public/scripts/polyfills/template-shadowroot.js
@@ -0,0 +1,6 @@
+// eslint-disable-next-line no-prototype-builtins
+if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')) {
+  import('@webcomponents/template-shadowroot/template-shadowroot.js').then(({ hydrateShadowRoots }) => {
+    hydrateShadowRoots(document.body);
+  });
+}
diff --git a/packages/app/src/app/layout.tsx b/packages/app/src/app/layout.tsx
@@ -1,4 +1,6 @@
+/* eslint-disable @next/next/no-before-interactive-script-outside-document */
 import type { Metadata } from 'next';
+import Script from 'next/script';
 
 export const metadata: Metadata = {
   title: 'Next.js ABC Web Components App',
@@ -18,7 +20,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           boxSizing: 'border-box',
         }}
       >
+        <noscript>Please enable JavaScript to view this website. Especially if you use Firefox.</noscript>
         {children}
+        <Script src="./scripts/polyfills/template-shadowroot.js" strategy="beforeInteractive" />
       </body>
     </html>
   );

diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json
@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "public/scripts/polyfills/template-shadowroot.js"],
   "exclude": ["node_modules"]
 }