Force custom elements polyfill on iOS

padloc · Apr 25, 2018 · 0cfbb83 · 0cfbb83
1 parent c469373
commit 0cfbb83
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/lib/build.js b/lib/build.js
@@ -248,13 +248,22 @@ function buildCordova(platform, dest) {
 
     return prepFiles
         .then(() => {
+            let lines = "\n<script src=\"cordova.js\"></script>\n";
+
+            if (platform === "ios") {
+                lines += `
+<script>
+    window.customElements = window.customElements || {};
+    window.customElements.forcePolyfill = true;
+    window.ShadyDOM = {force: true};
+</script>
+`;
+            }
+
             const stream = gulp.src("index.html", {cwd: dest})
                 .pipe(insertLines({
                     "after": /<head>/i,
-                    "lineAfter":
-`
-        <script src="cordova.js"></script>
-`
+                    "lineAfter": lines
                 }))
                 .pipe(gulp.dest(dest));
 
@@ -268,7 +277,8 @@ function buildDashboard(dest = "build/dashboard", watch = false) {
     const flags = `--inline-scripts --inline-css -r ${appDir}`;
     const source = "src/cloud-dashboard/cloud-dashboard.html";
     const targetDir = `${dest}/elements/cloud-dashboard`;
-    const bundleCmd = `node ${bundler} ${flags} ${source} | node ${crisper} --html ${targetDir}/cloud-dashboard.html --js ${targetDir}/cloud-dashboard.js`;
+    const bundleCmd = `node ${bundler} ${flags} ${source} | node ${crisper} --html ` +
+        `${targetDir}/cloud-dashboard.html --js ${targetDir}/cloud-dashboard.js`;
 
     function doIt() {
         return Promise.all([