Merge branch 'main' into refactor/xo-feedback

Author: mfranzke

demo/index.html

@@ -58,7 +58,7 @@
 			<h1>
 				<a
 					href="https://github.com/mfranzke/loading-attribute-polyfill-with-serviceworker/"
-					>loading-attribute-polyfill-with-serviceworker</a
+					>loading-attribute polyfill (with Service Worker)</a
 				>
 				demo page
 			</h1>
@@ -98,9 +98,6 @@ <h1>
 			<p class="scrolling-advice">
 				The following whitespace is included as a threshold,
 				<strong>please scroll down to the very end of this demo page</strong> to
-				see these images being loaded by the polyfill on The following
-				whitespace is included as a threshold,
-				<strong>please scroll down to the very end of this demo page</strong> to
 				see these images and iframe content being loaded by the polyfill on
 				<a href="https://caniuse.com/loading-lazy-attr">unsupported browsers</a>
 				(hint:
@@ -218,7 +215,7 @@ <h2>dynamic images &amp; iframes</h2>
 		<script type="module" src="index.js"></script>
 		<script>
 			if ("serviceWorker" in navigator) {
-				// Differentiate in between the ServiceWorker scripts for the different browser capabilities / support
+				// Differentiate in between the Service Worker scripts for the different browser capabilities / support
 				navigator.serviceWorker.register(
 					"../loading-attribute-polyfill.sw.js?loading-images=" +
 						("loading" in HTMLImageElement.prototype) +

demo/index.js

@@ -1,5 +1,3 @@
-import loadingAttributePolyfill from '../dist/loading-attribute-polyfill.module.js';
-
 // Test for dynamically inserted images and iframes
 let addDynamicContent = (event) => {
 	let divElement = document.createElement('div'),
@@ -40,26 +38,6 @@ document
 	.querySelector('button.add-dynamic-content')
 	.addEventListener('click', addDynamicContent);
 
-// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
-// for the list of other DOM interfaces.
-class LoadingImages extends HTMLImageElement {
-	constructor() {
-		super(); // Always call super() first in the constructor.
-		// Call for preparing the sample image element included the latest
-		loadingAttributePolyfill.prepareElement(this);
-	}
-}
-
-customElements.define('loading-image', LoadingImages, { extends: 'img' });
-
-// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
-// for the list of other DOM interfaces.
-class LoadingIframes extends HTMLIFrameElement {
-	constructor() {
-		super(); // Always call super() first in the constructor.
-		// Call for preparing the sample iframe element included the latest
-		loadingAttributePolyfill.prepareElement(this);
-	}
-}
-
-customElements.define('loading-iframe', LoadingIframes, { extends: 'iframe' });
+// Importing the two files which show how to register these elements as custom elements builtin extends
+import 'loading-attribute-polyfill.custom-builtin-extend.image.js';
+import 'loading-attribute-polyfill.custom-builtin-extend.iframe.js';

demo/loading-attribute-polyfill.custom-builtin-extend.iframe.js

@@ -0,0 +1,13 @@
+import loadingAttributePolyfill from '../dist/loading-attribute-polyfill.module.js';
+
+// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
+// for the list of other DOM interfaces.
+class LoadingIframes extends HTMLIFrameElement {
+	constructor() {
+		super(); // Always call super() first in the constructor.
+		// Call for preparing the sample iframe element included the latest dynamically inserted
+		loadingAttributePolyfill.prepareElement(this);
+	}
+}
+
+customElements.define('loading-iframe', LoadingIframes, { extends: 'iframe' });

demo/loading-attribute-polyfill.custom-builtin-extend.image.js

@@ -0,0 +1,13 @@
+import loadingAttributePolyfill from '../dist/loading-attribute-polyfill.module.js';
+
+// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
+// for the list of other DOM interfaces.
+class LoadingImages extends HTMLImageElement {
+	constructor() {
+		super(); // Always call super() first in the constructor.
+		// Call for preparing the sample image element included the latest dynamically inserted
+		loadingAttributePolyfill.prepareElement(this);
+	}
+}
+
+customElements.define('loading-image', LoadingImages, { extends: 'img' });