created a lazyload param:

- removed the getdata call in the constructor to allow for lazyloading
the data.
- moved the getdata call into the handledata function to consolidate the
calls and make the function a little simpler.
- removed self = this to make the load function simpler
- when the lazyload prop is set it will defer loading until the get()
function is called. This will allow lazy loading to be called by what
means needed, either a button click or if the element comes into the
viewport. This will allow this component to remain simple and prefer
composition to bloat.
- fixed the tests to run async and cleared DOM after each test.
- ticked the version number to a minor update.

Author: Colt Pini

include-fragment-element.js

@@ -10,8 +10,8 @@ function fire(name, target) {
   }, 0)
 }
 
-function handleData(el, data) {
-  return data.then(
+function handleData(el) {
+  return getData(el).then(
     function(html) {
       const parentNode = el.parentNode
       if (parentNode) {
@@ -44,10 +44,6 @@ function getData(el) {
 export class IncludeFragmentElement extends HTMLElement {
   constructor() {
     super()
-    // Preload data cache
-    getData(this)['catch'](function() {
-      // Ignore `src missing` error on pre-load.
-    })
   }
 
   static get observedAttributes() {
@@ -73,26 +69,34 @@ export class IncludeFragmentElement extends HTMLElement {
     }
   }
 
+  get lazyload() {
+    return this.hasAttribute('lazyload')
+  }
+  set lazyload(val) {
+    if (val) {
+      this.setAttribute('lazyload', '')
+    } else {
+      this.removeAttribute('lazyload')
+    }
+  }
+
   get data() {
     return getData(this)
   }
 
   attributeChangedCallback(attribute) {
-    if (attribute === 'src') {
-      // Reload data load cache.
-      const data = getData(this)
-
+    if (attribute === 'src' && !this.lazyload) {
       // Source changed after attached so replace element.
       if (this._attached) {
-        handleData(this, data)
+        handleData(this)
       }
     }
   }
 
   connectedCallback() {
     this._attached = true
-    if (this.src) {
-      handleData(this, getData(this))
+    if (this.src && !this.lazyload) {
+      handleData(this)
     }
   }
 
@@ -116,43 +120,40 @@ export class IncludeFragmentElement extends HTMLElement {
   }
 
   load() {
-    const self = this
-
     return Promise.resolve()
-      .then(function() {
-        const request = self.request()
-        fire('loadstart', self)
-        return self.fetch(request)
+      .then(() => {
+        fire('loadstart', this)
+        return this.fetch(this.request())
       })
-      .then(function(response) {
+      .then(response => {
         if (response.status !== 200) {
           throw new Error(`Failed to load resource: the server responded with a status of ${response.status}`)
         }
-
         const ct = response.headers.get('Content-Type')
         if (!ct || !ct.match(/^text\/html/)) {
           throw new Error(`Failed to load resource: expected text/html but was ${ct}`)
         }
-
         return response
       })
-      .then(function(response) {
-        return response.text()
-      })
+      .then(response => response.text())
       .then(
-        function(data) {
-          fire('load', self)
-          fire('loadend', self)
+        data => {
+          fire('load', this)
+          fire('loadend', this)
           return data
         },
-        function(error) {
-          fire('error', self)
-          fire('loadend', self)
+        error => {
+          fire('error', this)
+          fire('loadend', this)
           throw error
         }
       )
   }
 
+  get() {
+    handleData(this)
+  }
+
   fetch(request) {
     return fetch(request)
   }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "include-fragment-element",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "main": "dist/index-umd.js",
   "license": "MIT",
   "repository": {