fix: gracefully recover from link loading errors

.changeset/link-loading-errors.md

@@ -0,0 +1,8 @@
+---
+"html-include-element": patch
+---
+
+When included HTML files are loaded, their subresources (defined with `<link>`
+elements) are loaded as well. If one of those `<link>` elements fails to load,
+`<html-include>` will now gracefully fail, logging the failed url and
+continuing to load the rest of the HTML file.

html-include-element.js

@@ -30,7 +30,7 @@ async function linkLoaded(link) {
     else if (isLinkAlreadyLoaded(link)) resolve(link.sheet);
     else {
       link.addEventListener('load', () => resolve(link.sheet), { once: true });
-      link.addEventListener('error', reject, { once: true });
+      link.addEventListener('error', () => reject({ link }), { once: true });
     }
   });
 }
@@ -139,7 +139,14 @@ export class HTMLIncludeElement extends HTMLElement {
       // If we're not using shadow DOM, then the consuming root
       // is responsible to load its own resources
       if (!this.noShadow) {
-        await Promise.all([...this.shadowRoot.querySelectorAll('link')].map(linkLoaded));
+        const results = await Promise.allSettled([...this.shadowRoot.querySelectorAll('link')].map(linkLoaded));
+        for (const result of results) {
+          if (result.status === 'rejected') {
+            const { link } = result.reason;
+            const message =  `Could not load ${link.href}`;
+            console.error(message);
+          }
+        }
       }
 
       this.dispatchEvent(new Event('load'));

package.json

@@ -18,6 +18,7 @@
   ],
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
-    "@web/test-runner": "^0.13.27"
+    "@web/test-runner": "^0.13.27",
+    "hanbi": "^1.0.1"
   }
 }

test/html-include-element_test.js

@@ -1,4 +1,5 @@
 import {assert} from '@esm-bundle/chai';
+import {stubMethod, restore} from 'hanbi';
 
 import '../html-include-element.js';
 
@@ -63,6 +64,18 @@ suite('html-include-element', () => {
     });
   });
 
+  test('gracefully handles link loading errors', async () => {
+    const stub = stubMethod(console, 'error');
+    container.innerHTML = `
+      <html-include src="./test/test-link-errors.html">TEST</html-include>
+    `;
+    const include = container.querySelector('html-include');
+    await new Promise((res) => include.addEventListener('load', res));
+    assert.isNotNull(include.shadowRoot.querySelector('h1'));
+    assert.isTrue([...stub.calls].some(call => call.args[0]?.match(/^Could not load/)));
+    restore();
+  });
+
   // TODO: tests for mode & changing src attribute
 
 });

test/test-link-errors.html

@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="./test/styles.css">
+<link rel="stylesheet" href="./test/error.error">
+<h1>TEST</h1>
+