feat: allow opt-out of define()

Introduce option to opt-out of `define()` by adding a `?define=false` query parameter to the import/script URL

- allows the use of a different tag name
- run some additional advanced configuration before definition etc.

Author: andreruffert

src/constants.js

@@ -1,4 +1,4 @@
-export const ELEMENT_NAME = 'progressive-image';
+export const DEFAULT_TAG_NAME = 'progressive-image';
 export const MESSAGES = {
   placeholderElement: {
     missing:

src/index.js

@@ -1,9 +1,8 @@
 import './style.css';
-import { ELEMENT_NAME } from './constants';
 import ProgressiveImageElement from './progressive-image-element';
-export { ProgressiveImageElement as default };
 
-if (!window.customElements.get(ELEMENT_NAME)) {
-  window.ProgressiveImageElement = ProgressiveImageElement;
-  window.customElements.define(ELEMENT_NAME, ProgressiveImageElement);
+export default ProgressiveImageElement;
+
+if (!new URL(import.meta.url).searchParams.has('define', 'false')) {
+  window.ProgressiveImageElement = ProgressiveImageElement.define();
 }

src/progressive-image-element.js

@@ -1,8 +1,16 @@
-import { MESSAGES } from './constants';
+import { DEFAULT_TAG_NAME, MESSAGES } from './constants';
+
 const LAZY_LOADING_SUPPORT = 'loading' in HTMLImageElement.prototype;
 const SLOW_CONNECTIONS = /\slow-2g|2g|3g/;
 
 class ProgressiveImageElement extends HTMLElement {
+  static define(tagName = DEFAULT_TAG_NAME, registry = customElements) {
+    if (!registry.get(tagName)) {
+      registry.define(tagName, ProgressiveImageElement);
+      return ProgressiveImageElement;
+    }
+  }
+
   constructor() {
     super();
     const placeholderElement = this.querySelector('img, svg');