fix(lazy): ensure src changes don't trigger an early load

Author: keithamus

src/index.ts

@@ -111,7 +111,7 @@ export default class IncludeFragmentElement extends HTMLElement {
   attributeChangedCallback(attribute: string, oldVal:string|null): void {
     if (attribute === 'src') {
       // Source changed after attached so replace element.
-      if (this.isConnected) {
+      if (this.isConnected && this.loading === 'eager') {
         handleData(this)
       }
     } else if (attribute === 'loading') {

test/test.js

@@ -466,6 +466,21 @@ suite('include-fragment-element', function() {
     ])
   })
 
+  test('loading=lazy does not load when src is changed', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment loading="lazy" src="">loading</include-fragment>'
+    div.hidden = true
+    document.body.appendChild(div)
+    div.firstChild.src = '/hello'
+    return Promise.race([
+      when(div.firstChild, 'load').then(() => {
+        throw new Error('<include-fragment loading=lazy> loaded too early')
+      }),
+      new Promise(resolve => setTimeout(resolve, 100))
+    ])
+  })
+
+
   test('loading=lazy loads as soon as element visible on page', function() {
     const div = document.createElement('div')
     div.innerHTML = '<include-fragment loading="lazy" src="/hello">loading</include-fragment>'