refactor: switched to customized built-in elements

mfranzke · mfranzke · commit 2712086cce04 · 2021-12-27T11:46:15.000+01:00
diff --git a/demo/index.html b/demo/index.html
@@ -45,6 +45,9 @@
 			}
 		</style>
 		<link rel="stylesheet" href="../dist/loading-attribute-polyfill.css" />
+
+		<!-- Include polyfill for custom elements and built-in extends support -->
+		<script src="//unpkg.com/@ungap/custom-elements"></script>
 	</head>
 	<body>
 		<header>
@@ -136,6 +139,7 @@ <h1>
 				alt=""
 				width="250"
 				height="150"
+				is="loading-image"
 			/>
 
 			<!-- Load an image right away instead of lazy-loading -->
@@ -168,6 +172,7 @@ <h1>
 					alt=""
 					width="250"
 					height="150"
+					is="loading-image"
 				/>
 			</picture>
 
@@ -184,6 +189,7 @@ <h1>
 				loading="lazy"
 				width="250"
 				height="150"
+				is="loading-image"
 			/>
 
 			<!-- Lazy-load an offscreen iframe when the user scrolls near it -->
@@ -193,6 +199,7 @@ <h1>
 				height="180"
 				loading="lazy"
 				title="sample document"
+				is="loading-iframe"
 			></iframe>
 
 			<h2>dynamic images &amp; iframes</h2>
diff --git a/demo/index.js b/demo/index.js
@@ -6,16 +6,18 @@ let addDynamicContent = (event) => {
 		imageElement = document.createElement('img'),
 		iframeElement = document.createElement('iframe');
 
+	imageElement.setAttribute('is', 'loading-image');
 	imageElement.setAttribute(
 		'src',
-		'img/lazyimg-src-loadinglazy.250x150.guetzli.jpg?loading=lazy&image-width=250&image-height=150'
+		'img/lazyimg-src-loadinglazy.250x150.guetzli.jpg?loading=lazy&image-width=250&image-height=150&dynamic'
 	);
 	imageElement.setAttribute('loading', 'lazy');
 	imageElement.setAttribute('alt', '..');
 	imageElement.setAttribute('width', '250');
 	imageElement.setAttribute('height', '150');
 
-	iframeElement.setAttribute('src', 'iframe.html?loading=lazy');
+	iframeElement.setAttribute('is', 'loading-iframe');
+	iframeElement.setAttribute('src', 'iframe.html?loading=lazy&dynamic');
 	iframeElement.setAttribute('loading', 'lazy');
 	iframeElement.setAttribute('title', '..');
 	iframeElement.setAttribute('width', '320');
@@ -26,13 +28,35 @@ let addDynamicContent = (event) => {
 
 	document.querySelector('main').insertAdjacentElement('beforeend', divElement);
 
-	// Call for preparing the sample image element included the latest
-	loadingAttributePolyfill.prepareElement(divElement.querySelector('img'));
-	loadingAttributePolyfill.prepareElement(divElement.querySelector('iframe'));
-
 	event.preventDefault();
 };
 
 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
+		console.log('preparing image', this);
+		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
+		console.log('preparing iframe', this);
+		loadingAttributePolyfill.prepareElement(this);
+	}
+}
+
+customElements.define('loading-iframe', LoadingIframes, { extends: 'iframe' });
