decue 1.0.0 → 1.1.0

package/src/decue.js

@@ -7,127 +7,171 @@
 // Declarative Custom Elements
 // https://codeberg.org/jyri-matti/decue
 
-/**
- * @typedef { ShadowRootMode | 'none' } ShadowMode
- */
-
 var decue = (function() {
+    /**
+     * @typedef { ShadowRootMode | 'none' } ShadowMode
+     */
+
+    var debug = ('currentScript' in document && document['currentScript'] ? document['currentScript'].hasAttribute('debug') : false) || false;
+
     /** @satisfy {ShadowMode} */
-    const defaultShadow = document.currentScript.getAttribute('shadow') || 'none';
+    var defaultShadow = ('currentScript' in document && document['currentScript'] ? document['currentScript'].getAttribute('shadow') : undefined) || 'none';
     if (!['open', 'closed', 'none'].includes(defaultShadow)) {
-        throw `Invalid default shadow DOM mode "${defaultShadow}". Must be one of "open", "closed" or "none".`;
+        throw new Error('Invalid default shadow DOM mode "' + defaultShadow + '". Must be one of "open", "closed" or "none".');
     }
 
-    const placeholders = /{([a-zA-Z_0-9]+)((?:\|[.]?[a-zA-Z_0-9]+)*)}/g;
+    var placeholders = /{(\.?[a-zA-Z_0-9]+)((?:[.|][a-zA-Z_0-9]+)*)}/g;
 
     /** @type {(a: string) => boolean} */
-    const isNotBuiltinAttribute = a => !(a === 'shadow' || a.startsWith('decue-'));
-
-    // check if the element is still in the document
-    /** @type {(element: Node) => boolean} */
-    const isInDocument = element => {
-        var currentElement = element;
-        while (currentElement && currentElement.parentNode) {
-            if (currentElement.parentNode === document) {
-                return true;
-            } else if (currentElement.parentNode instanceof ShadowRoot) {
-                currentElement = currentElement.parentNode.host;
-            } else {
-                currentElement = currentElement.parentNode;
-            }
-        }
-        return false;
-    };
+    var isNotBuiltinAttribute = function(a) { return !(a === 'shadow' || a.startsWith('decue-')); };
     
     // evaluate a function or property on the given attribute value
-    const evalFunc = (/** @type {Node} */ ths) => (/** @type {any} */ attrValue, /** @type {string} */ func) => {
-        const method = func.startsWith('.') ? func.substring(1) : undefined;
-        // @ts-ignore
-        const globalFunc = window[func];
-        if (!method && !globalFunc) {
-            throw `Global function "${func}" not found. Make sure to include it (not deferred) before this element is created.`;
-        }
-        return method ? (typeof attrValue[method] === 'function' ? attrValue[method]() : attrValue[method])
-                      : globalFunc.apply(ths, [attrValue]);
+    var evalFunc = function(/** @type {Node} */ ths) {
+        return function(/** @type {any} */ attrValue, /** @type {string} */ func) {
+            var name = func.startsWith('.') ? func.substring(1) : undefined;
+            var isMethod = name && typeof attrValue[name] === 'function';
+            var registeredFunc = registeredFunctions[func];
+            if (!name && !registeredFunc) {
+                throw new Error('Global function "' + func + '" not found. Make sure to include it (not deferred) before this element is created.');
+            }
+            return name
+                ? (isMethod ? attrValue[name]() : attrValue[name])
+                : registeredFunc.apply(ths, [attrValue]);
+        };
     };
     
     // replace all placeholders in originalValue
     /** @type {(ths: Node, root: HTMLElement, originalValue: string) => string} */
-    const replacePlaceholders = (ths, root, originalValue) =>
-        originalValue.replaceAll(placeholders, (placeholder, /** @type {string} */ attributeName, /** @type {string} */ pipes) =>
-            root.hasAttribute(attributeName)
-                ? pipes.split('|').slice(1).reduce(evalFunc(ths), root.getAttribute(attributeName))
-                : placeholder);
-    
+    var replacePlaceholdersFromAttributes = function(ths, root, originalValue) {
+        return originalValue.replaceAll(placeholders, function(placeholder, /** @type {string} */ attributeName, /** @type {string} */ pipes) {
+            var parts = (attributeName+pipes).replaceAll(/([^|])\./g, '$1|.').split('|');
+            return root.hasAttribute(attributeName)
+                ? parts.slice(1).reduce(evalFunc(ths), root.getAttribute(attributeName))
+                : attributeName.startsWith('.')
+                ? parts.reduce(evalFunc(ths), root)
+                : placeholder;
+        });
+    };
+
     // update all placeholders in the given node
     /** @type {(root: HTMLElement, arr:[Node,string,string]) => void} */
-    const updatePlaceholders = (root, [node,originalValue,attributeName]) => {
-        const newval = replacePlaceholders(node, root, originalValue);
-        if (node instanceof Text) {
-            if (newval !== node.data) {
-                node.data = newval;
+    var updatePlaceholdersFromAttributes = function(root, nodeOriginalValueAttributeName) {
+        var node = nodeOriginalValueAttributeName[0];
+        var originalValue = nodeOriginalValueAttributeName[1];
+        var attributeName = nodeOriginalValueAttributeName[2];
+        var newval = replacePlaceholdersFromAttributes(node, root, originalValue);
+        if (node.nodeType === Node.TEXT_NODE) {
+            var n = /** @type {Text} */ (node);
+            if (newval !== n.data) {
+                // only change text-node data, so the node itself remains
+                n.data = newval;
             }
-        } else if (node instanceof HTMLElement) {
-            if (newval !== node.getAttribute(attributeName)) {
-                node.setAttribute(attributeName, newval);
+        } else if (node.nodeType === Node.ELEMENT_NODE) {
+            var e = /** @type {Element} */ (node);
+            if (newval !== e.getAttribute(attributeName)) {
+                e.setAttribute(attributeName, newval);
             }
         }
     };
 
-    /** @type {(elem: Node, matchHandler: (node: (Text|HTMLElement), attributeName: string?, placeholderName: string) => void) => void} */
-    const forEachPlaceholder = (elem, matchHandler) => {
-        const walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+    /** @type {(elem: Node, matchHandler: (node: (Text|Element), attributeName: string?, placeholderName: string) => void) => void} */
+    var forEachPlaceholder = function(elem, matchHandler) {
+        var walker = document.createTreeWalker(elem, 0x4 /* text */ | 0x1 /* element */);
         while (walker.nextNode()) {
-            const node = walker.currentNode;
-            if (node instanceof Text) {
-                [...node.data.matchAll(placeholders)].forEach(m => matchHandler(node, undefined, m[1]));
-            } else if (node instanceof HTMLElement) {
-                node.getAttributeNames().forEach(a =>
-                    [...node.getAttribute(a).matchAll(placeholders)].forEach(m => matchHandler(node, a, m[1])));
+            var node = walker.currentNode;
+            if (node.nodeType === Node.TEXT_NODE) {
+                var n = /** @type {Text} */ (node);
+                var match;
+                while ((match = placeholders.exec(n.data)) !== null) {
+                    matchHandler(n, null, match[1]);
+                }
+            } else if (node.nodeType === Node.ELEMENT_NODE) {
+                var e = /** @type {Element} */ (node);
+                e.getAttributeNames().forEach(function(a) {
+                    var attr = /** @type {string} */ (e.getAttribute(a));
+                    var match;
+                    while ((match = placeholders.exec(attr)) !== null) {
+                        matchHandler(e, a, match[1]);
+                    }
+                });
             }
         }
     };
 
     /** @type {(root: (HTMLElement|ShadowRoot), content: DocumentFragment) => void} */
-    const lightDOMSlotting = (root, content) => {
+    var lightDOMSlotting = function(root, content) {
         // named slots
-        content.querySelectorAll('slot[name]').forEach(slot => {
-            const slotContents = root.querySelectorAll(`:scope > [slot="${slot.getAttribute('name')}"]`);
-            const replacement = slotContents.length > 0 ? slotContents : slot.children;
+        content.querySelectorAll('slot[name]').forEach(function(slot) {
+            var slotContents = root.querySelectorAll(':scope > [slot="' + slot.getAttribute('name') + '"]');
+            var replacement = slotContents.length > 0 ? slotContents : slot.children;
             slot.replaceWith.apply(slot, replacement);
         });
         
-        const unnamedSlot = content.querySelector('slot:not([name])');
+        // Only the first unnamed slot is the default slot
+        var unnamedSlot = content.querySelector('slot:not([name])');
         if (unnamedSlot) {
-            const slotContents = [...root.childNodes].filter(x => x.nodeType !== Node.ELEMENT_NODE || ! /** @type HTMLElement */ (x).hasAttribute('slot'));
-            const replacement = slotContents.length > 0 ? slotContents : unnamedSlot.children;
+            var slotContents = Array.prototype.slice.call(root.childNodes).filter(function(/** @type {Node} */x) { return x.nodeType !== Node.ELEMENT_NODE || ! /** @type HTMLElement */ (x).hasAttribute('slot'); });
+            var replacement = slotContents.length > 0 ? slotContents : unnamedSlot.children;
             unnamedSlot.replaceWith.apply(unnamedSlot, replacement);
         }
     };
+
+    /** @type {(ths: HTMLElement) => [string, EventListener][]} */
+    var createEventListeners = function(ths) {
+        return ths.getAttributeNames()
+                  .filter(function(a) { return a.startsWith("decue-on:"); })
+                  .map(function(a) { return a.substring("decue-on:".length); })
+                  .map(function(eventName) {
+                      var func = ths.getAttribute('decue-on:' + eventName);
+                      // @ts-ignore
+                      var handler = globalThis[func];
+                      if (!handler) {
+                          throw 'Global handler function "' + func + '" for event "' + eventName + '" not found.';
+                      }
+                      ths.addEventListener(eventName, handler);
+                      return [eventName, handler];
+                  });
+    }
+
+    /** @type {(ths: HTMLElement, boundNodes: [Node,string,string][]) => [Node,string,string][]} */
+    var updateBindings = function(ths, boundNodes) {
+        if (boundNodes) {
+            var stillInDocument = boundNodes.filter(function(nodes) { return nodes[0].ownerDocument !== undefined; });
+            if (stillInDocument.length !== boundNodes.length) {
+                boundNodes = stillInDocument;
+            }
+            boundNodes.forEach(function(x) { updatePlaceholdersFromAttributes(ths, x); });
+        }
+        return boundNodes;
+    }
     
-    const defineElement = (/** @type {boolean} */ debug,
-                           /** @type {string} */ elementName,
-                           /** @type {HTMLTemplateElement?} */ template,
-                           /** @type {boolean} */ formAssociated,
-                           /** @type {string[]} */ attributesToObserve) => {
-        /** @type { (msg: string) => void} */
-        const dbg = msg => debug ? console.log(elementName + ': ' + msg) : undefined;
+    var defineElement = function(/** @type {boolean} */ debug,
+                                 /** @type {string} */ elementName,
+                                 /** @type {HTMLTemplateElement?} */ template,
+                                 /** @type {boolean} */ formAssociated,
+                                 /** @type {string[]} */ attributesToObserve) {
+        /** @param {...any} arguments */
+        var dbg = function() {
+            if (debug && console) {
+                console.log.apply(null, [elementName].concat(Array.prototype.slice.call(arguments)));
+            }
+        }
 
         /** @type {string[]} */ 
         var observedAttrs = attributesToObserve;
         if (template) {
-            forEachPlaceholder(template.content, (_node, _attributeName, placeholderName) => observedAttrs.push(placeholderName))
+            forEachPlaceholder(template.content, function(_node, _attributeName, placeholderName) { observedAttrs.push(placeholderName); });
         }
-        observedAttrs = [...new Set(observedAttrs.filter(isNotBuiltinAttribute))];
-        window.customElements.define(elementName, class extends HTMLElement {
-            static formAssociated = formAssociated;
-            static observedAttributes = observedAttrs;
+        observedAttrs = observedAttrs.filter(isNotBuiltinAttribute).filter(function(v, i, arr) { return arr.indexOf(v) === i; });
+        globalThis.customElements.define(elementName, class extends HTMLElement {
+            static get formAssociated() { return formAssociated; }
+            static get observedAttributes() { return observedAttrs; }
             
             constructor() {
                 super();
 
                 /** @type {HTMLTemplateElement} */ 
-                this._template = template || [...document.getElementsByTagName('template')].find(x => x.getAttribute('decue') === elementName);
+                this._template = template || Array.prototype.slice.call(document.getElementsByTagName('template')).filter(function(/** @type {HTMLTemplateElement} */ x) { return x.getAttribute('decue') === elementName; }).concat([undefined])[0];
                 if (!this._template) {
                     throw `Template for "${elementName}" not found. Make sure it comes in the DOM before any corresponding custom element.`;
                 }
@@ -136,55 +180,42 @@ var decue = (function() {
                     throw `Cannot declare a predefined custom element "${elementName}" as formAssociated. Move it from elements="..." to formAssociated="...".`;
                 }
 
-                const ths = this;
-                this.getAttributeNames()
-                    .filter(a => a.startsWith("decue-on:"))
-                    .map(a => a.substring("decue-on:".length))
-                    .forEach(eventName => {
-                        const func = ths.getAttribute('decue-on:' + eventName);
-                        // @ts-ignore
-                        const handler = window[func];
-                        if (!handler) {
-                            throw `Global handler function "${func}" for event "${eventName}" not found.`;
-                        }
-                        dbg('Registering event listener for event: ' + eventName);
-                        ths.addEventListener(eventName, handler);
-                    });
-
                 if (formAssociated) {
                     // https://web.dev/articles/more-capable-form-controls
-                    const internals = this.attachInternals();
-                    var value = this.getAttribute('value');
-                    dbg('Making form-associated with value: ' + value);
+                    var internals = this.attachInternals();
+
+                    /** @type {any} */
+                    var _value;
+                    var ths = this;
                     Object.defineProperties(this, {
                         internals: { value: internals, writable: false },
-                        value:     { get: () => value, set: newValue => {
-                            value = newValue;
-                            internals.setFormValue(value);
+                        value:     { get: function() { return _value; }, set: function(newValue) {
+                            _value = newValue;
+                            internals.setFormValue(_value);
                             // @ts-ignore
                             ths.checkValidity();
+                            ths._boundNodes = updateBindings(ths, ths._boundNodes);
                         }},
 
-                        name:              { get: () => this.getAttribute('name') },
-                        form:              { get: () => internals.form },
-                        labels:            { get: () => internals.labels },
-                        validity:          { get: () => internals.validity },
-                        validationMessage: { get: () => internals.validationMessage },
-                        willValidate:      { get: () => internals.willValidate },
+                        name:              { get: function() { return this.getAttribute('name'); } },
+                        form:              { get: function() { return internals.form; } },
+                        labels:            { get: function() { return internals.labels; } },
+                        validity:          { get: function() { return internals.validity; } },
+                        validationMessage: { get: function() { return internals.validationMessage; } },
+                        willValidate:      { get: function() { return internals.willValidate; } },
 
                         // @ts-ignore
-                        setFormValue:   { value: (n,s) => internals.setFormValue(value = n, s), writable: false },
-                        setValidity:    { value: internals.setValidity.bind(internals),         writable: false },
-                        checkValidity:  { value: () => {
+                        setFormValue:   { value: function(n,s) {
+                            internals.setFormValue(_value = n, s);
+                            ths._boundNodes = updateBindings(ths, ths._boundNodes);
+                        }, writable: false },
+                        setValidity:    { value: internals.setValidity.bind(internals), writable: false },
+                        checkValidity:  { value: function() {
                             fireEvent(ths, 'checkvalidity');
                             return internals.checkValidity();
                         }, writable: false },
-                        reportValidity: { value: internals.reportValidity.bind(internals),      writable: false }
+                        reportValidity: { value: internals.reportValidity.bind(internals), writable: false }
                     });
-                    this.value = value;
-                    if (!this.hasAttribute('tabindex')) {
-                        this.tabIndex = 0;
-                    }
                 }
             }
 
@@ -195,86 +226,140 @@ var decue = (function() {
                     throw `Invalid shadow DOM mode "${this._shadow}" for element "${elementName}". Must be one of "open", "closed" or "none".`;
                 }
                 
-                const root = this._shadow === 'none' ? /** @type {HTMLElement} */ (this) : this.attachShadow({ mode: this._shadow, delegatesFocus: true });
-                const content = /** @type {DocumentFragment} */ (this._template.content.cloneNode(true));
-                
-                const finalize = () => {
-                    dbg('Finalizing...');
+                if (!this._shadowRoot) {
+                    this._shadowRoot = this._shadow === 'none'
+                        ? /** @type {HTMLElement} */ (this)
+                        : this.attachShadow({ mode: this._shadow, delegatesFocus: true });
 
-                    if (this._shadow === 'none') {
-                        // Implement slotting manually when no shadow DOM in use
-                        lightDOMSlotting(root, content);
-                        dbg('Slots initialized');
+                    if (formAssociated) {
+                        // attributes must not be accessed in constructor, thus these are initalized here.
+                        // @ts-ignore
+                        this.value = this.getAttribute('value');
+                        dbg('Making form-associated with value', this.value);
+                        if (!this.hasAttribute('tabindex')) {
+                            this.tabIndex = 0;
+                        }
                     }
 
-                    // nodes having placeholder references, and thus need to be updated when attributes change.
-                    /** @type {[Node,string,string][]} */
-                    this._boundNodes = [];
+                    this._eventListeners = createEventListeners(this);
                     
-                    // Find all placeholders in the attributes and text of template or element content.
-                    [content, this].forEach(x =>
-                        forEachPlaceholder(x, (node,attributeName,_) => this._boundNodes.push(node instanceof HTMLElement
-                            ? [node, node.getAttribute(attributeName), attributeName]
-                            : [node, node.data, undefined])));
-
-                    const ths = this;
-                    // If there are attributes, which weren't yet observed statically, observe them dynamically with a MutationObserver.
-                    const unobservedAttributes = this.getAttributeNames().filter(isNotBuiltinAttribute).filter(x => !observedAttrs.includes(x));
-                    if (unobservedAttributes.length > 0 && this._boundNodes.length > 0) {
-                        new MutationObserver(recs => recs.forEach(rec => {
-                            if (unobservedAttributes.includes(rec.attributeName)) {
-                                ths.attributeChangedCallback(rec.attributeName, rec.oldValue, (/** @type {HTMLElement} */ (rec.target)).getAttribute(rec.attributeName));
+                    /**
+                     * @typedef { HTMLElement & {
+                         _shadowRoot: (ShadowRoot|HTMLElement),
+                         _template: HTMLTemplateElement,
+                         _shadow: ShadowMode,
+                         _boundNodes: [Node,string,string][],
+                         _decueMutationObserved?: boolean,
+                         _observer?: MutationObserver,
+                         _eventListeners?: [string, EventListener][],
+                         attributeChangedCallback: (name: string, oldValue: string, newValue: string) => void
+                     }} Ths
+                     */
+                    /** @type {Ths} */
+                    var ths = this;
+                    var finalize = function() {
+                        dbg('Finalizing...');
+
+                        var content = /** @type {DocumentFragment} */ (ths._template.content.cloneNode(true));
+
+                        if (ths._shadow === 'none') {
+                            // Implement slotting manually when no shadow DOM in use
+                            lightDOMSlotting(ths._shadowRoot, content);
+                            dbg('Slots initialized');
+                        }
+
+                        // nodes having placeholder references, and thus need to be updated when attributes change.
+                        /** @type {[Node,string,string][]} */
+                        ths._boundNodes = [];
+                        
+                        // Find all placeholders in the attributes and text of template or element content.
+                        [content, ths].forEach(function(x) {
+                            forEachPlaceholder(x, function(node,attributeName) {
+                                ths._boundNodes.push(node.nodeType == Node.ELEMENT_NODE
+                                    ? [node, /** @type {HTMLElement} */ (node).getAttribute(attributeName), attributeName]
+                                    : [node, /** @type {Text} */ (node).data, undefined]);
+                            });
+                        });
+
+                        // If there are attributes, which weren't yet observed statically, observe them dynamically with a MutationObserver, if present.
+                        var unobservedAttributes = ths.getAttributeNames().filter(isNotBuiltinAttribute).filter(function(x) { return !observedAttrs.includes(x); });
+                        if (unobservedAttributes.length > 0 && ths._boundNodes.length > 0) {
+                            if (typeof MutationObserver === 'undefined') {
+                                console.info(`Decue: Element "${elementName}" has attributes (${unobservedAttributes.join(' ')}) which are not declared in observedAttributes, but no MutationObserver is available. These attributes won't be observed.`);
+                            } else {
+                                // eslint-disable-next-line no-undef
+                                ths._observer = new MutationObserver(function(recs) {
+                                    recs.forEach(function(rec) {
+                                        if (unobservedAttributes.includes(rec.attributeName)) {
+                                            var newVal = /** @type {HTMLElement} */ (rec.target).getAttribute(rec.attributeName);
+                                            dbg('Attribute observer hit', rec.attributeName, newVal, "(unobserved attributes: ", unobservedAttributes, ")");
+                                            ths.attributeChangedCallback(rec.attributeName, rec.oldValue, newVal);
+                                        }
+                                    });
+                                });
+                                ths._observer.observe(ths, { attributeOldValue: true });
+                                ths._decueMutationObserved = true;
+                                if (debug) {
+                                    dbg('Observing attributes with MutationObserver', unobservedAttributes);
+                                    ths.setAttribute('data-decue-mutation-observed-attributes', unobservedAttributes.join(' '));
+                                }
                             }
-                        })).observe(this, { attributes: true });
-                        this._decueMutationObserved = true;
-                        if (debug) {
-                            dbg('Observing attributes with MutationObserver: ' + unobservedAttributes.join(' '));
-                            this.setAttribute('data-decue-mutation-observed-attributes', unobservedAttributes.join(' '));
                         }
-                    }
-                    if (debug && observedAttrs.length > 0) {
-                        dbg('Observing attributes with observedAttributes: ' + observedAttrs.join(' '));
-                        this.setAttribute('data-decue-observed-attributes', observedAttrs.join(' '));
-                    }
-                    
-                    root.append(content);
-                    this._boundNodes.forEach(x => updatePlaceholders(ths, x));
+                        if (debug && observedAttrs.length > 0) {
+                            dbg('Observing attributes with observedAttributes', observedAttrs);
+                            ths.setAttribute('data-decue-observed-attributes', observedAttrs.join(' '));
+                        }
+                        
+                        ths._shadowRoot.append(content);
+                        ths._boundNodes.forEach(function(x) { updatePlaceholdersFromAttributes(ths, x); });
 
-                    fireEvent(this, 'connect');
-                };
+                        fireEvent(ths, 'connect');
+                    };
 
-                if (template) {
-                    finalize();
-                } else {
-                    // predefined element. Finalize only after the children are parsed.
-                    /** @type {MutationObserver} */
-                    const observer = new MutationObserver(() => {
-                        observer.disconnect();
+                    if (template || ths.ownerDocument.readyState != 'loading') {
                         finalize();
-                    });
-                    observer.observe(this.parentElement, { childList: true });
+                    } else if (typeof MutationObserver === 'undefined') {
+                        throw new Error(`No MutationObserver available, cannot use predefined elements`);
+                    } else {
+                        // predefined element. Finalize only after the children are parsed.
+                        /** @type {MutationObserver} */
+                        // eslint-disable-next-line no-undef
+                        var observer = new MutationObserver(function() {
+                            observer.disconnect();
+                            finalize();
+                        });
+                        observer.observe(ths.parentElement, { childList: true });
+                    }
                 }
             }
 
             /** @type { (name: string, oldValue: string, newValue: string) => void } */
             attributeChangedCallback(name, oldValue, newValue) {
                 if (oldValue !== newValue) {
-                    if (name === 'value' && this.value !== newValue) {
+                    if (formAssociated && name === 'value' && this.value !== newValue) {
+                        // if the value attribute changes for a form component, update the component 'value' property as well
                         this.value = newValue;
                     }
-                    if (this._boundNodes) {
-                        const stillInDocument = this._boundNodes.filter(([node,_]) => isInDocument(node));
-                        if (stillInDocument.length !== this._boundNodes.length) {
-                            this._boundNodes = stillInDocument;
-                        }
-                        const ths = this;
-                        this._boundNodes.forEach(x => updatePlaceholders(ths, x));
-                    }
+                    this._boundNodes = updateBindings(this, this._boundNodes);
                     fireEvent(this, 'attributechange', { name, oldValue, newValue })
                 }
             }
 
-            disconnectedCallback()                             { fireEvent(this, 'disconnect') }
+            disconnectedCallback() {
+                fireEvent(this, 'disconnect');
+                if (this._observer) {
+                    dbg('Disconnecting MutationObserver');
+                    this._observer.disconnect();
+                    delete this._observer;
+                }
+                if (this._eventListeners) {
+                    dbg('Removing event listeners');
+                    this._eventListeners.forEach(function(/** @type {[string, EventListener]} */ x) {
+                        this.removeEventListener(x[0], x[1]);
+                    }, this);
+                    delete this._eventListeners;
+                }
+            }
             adoptedCallback()                                  { fireEvent(this, 'adopt') }
             /** @type { (form:HTMLFormElement) => void } */
             formAssociatedCallback(form)                       { fireEvent(this, 'formassociate', { form }) }
@@ -287,46 +372,103 @@ var decue = (function() {
     }
 
     /** @type {(ths: HTMLElement, name: string, detail?: object) => void} */
-    const fireEvent = (ths, name, detail) => {
-        ths.dispatchEvent(new CustomEvent(name, { detail: detail || {}, bubbles: true }));
-    }
-
-    const debug = document.currentScript.hasAttribute('debug');
+    var fireEvent = function(ths, name, detail) {
+        if (typeof CustomEvent !== 'undefined') {
+            ths.dispatchEvent(new CustomEvent(name, { detail: detail || {}, bubbles: true }));
+        } else {
+            ths.dispatchEvent(new Event(name, { detail: detail || {}, bubbles: true }));
+        }
+    };
 
     // predefine explicitly listed custom elements immediately before the DOM is parsed
-    [{attr: 'elements', formAssociated: false},{attr: 'form-associated', formAssociated: true}].forEach(({attr, formAssociated}) => {
-        if (document.currentScript.hasAttribute(attr)) {
-            document.currentScript.getAttribute(attr)
+    [{attr: 'elements', formAssociated: false},{attr: 'form-associated', formAssociated: true}].forEach(function(x) {
+        if (document.currentScript.hasAttribute(x.attr)) {
+            document.currentScript.getAttribute(x.attr)
                                   .split(/\s+/)
-                                  .map(x => x.split(/\[|]/))
-                                  .forEach(([elementName,observedAttributes]) =>
-                                      defineElement(debug, elementName, undefined, formAssociated, (observedAttributes ? observedAttributes.split(',') : [])));
+                                  .map(function(x) { return x.split(/\[|]/); })
+                                  .forEach(function([elementName,observedAttributes]) {
+                                      defineElement(debug, elementName, null, x.formAssociated, (observedAttributes ? observedAttributes.split(',') : []));
+                                  });
         }
     });
 
+    /** @type { {[key: string]: Function} } */
+    var registeredFunctions = {
+    };
+
+    if (document.currentScript && document.currentScript.hasAttribute('functions')) {
+        document.currentScript.getAttribute('functions').split(/\s+/).forEach(function(f) {
+            var name = f;
+            var location = f;
+            var named = f.indexOf(':');
+            if (named >= 0) {
+                name = f.substring(0, named);
+                location = f.substring(named+1);
+            }
+            var func = location.split('.').reduce(function(obj, prop) {
+                if (obj && prop in obj) {
+                    // @ts-ignore
+                    return obj[prop];
+                } else {
+                    throw `Cannot find namespace "${prop}" while resolving function "${f}".`;
+                }
+            }, globalThis);
+            if (typeof func !== 'function') {
+                throw `Function "${f}" not found. Make sure to include it (not deferred) before Decue script.`;
+            }
+            registeredFunctions[name] = func;
+        });
+    }
+
     /** @type { (template:HTMLTemplateElement) => void } */
-    const processTemplate = template => {
-        const name = template.getAttribute('decue');
-        if (name && !window.customElements.get(name)) {
+    var processTemplate = function(template) {
+        var name = template.getAttribute('decue');
+        if (name && !globalThis.customElements.get(name)) {
             defineElement(debug, name, template, template.hasAttribute('form-associated'), []);
         }
     };
     
-    window.addEventListener('DOMContentLoaded', () => {
+    var initializer = function() {
         // define all custom elements not already defined
         [...document.getElementsByTagName('template')].forEach(processTemplate);
         
         // define all custom elements included in <object> tags
         [...document.getElementsByTagName('object')]
-                    .filter(obj => obj.getAttribute('type') === 'text/html')
-                    .forEach(obj => {
-                        obj.addEventListener('load', () => [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate));
-                        [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate);
+                    .filter(function(obj) {
+                        return obj.getAttribute('type') === 'text/html';
+                    })
+                    .forEach(function(obj) {
+                        obj.addEventListener('load', function() {
+                            if (obj.contentDocument) {
+                                [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate);
+                            }
+                        });
+                        if (obj.contentDocument) {
+                            [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate);
+                        }
                     });
-    });
+    };
+    if (typeof globalThis !== 'undefined') {
+        globalThis.addEventListener('DOMContentLoaded', initializer);
+    } else if (typeof window !== 'undefined') {
+        window.addEventListener('DOMContentLoaded', initializer);
+    }
 
     return {
+        /** Process a <template> element */
         processTemplate: processTemplate,
-        defineElement: defineElement
+        
+        /** Manually define a custom element */
+        defineElement: defineElement,
+
+        /** Add here all the function you want to refer to in pipings */
+        registeredFunctions: registeredFunctions
     };
 })();
+
+// Attach to globalThis when available
+if (typeof globalThis !== 'undefined') {
+    globalThis.decue = decue;
+} else if (typeof window !== 'undefined') {
+    window.decue = decue;
+}