decue 1.0.0 → 1.0.1

package/dist/decue.js

@@ -195,64 +195,67 @@ 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 });
+                    
+                    const finalize = () => {
+                        dbg('Finalizing...');
 
-                    if (this._shadow === 'none') {
-                        // Implement slotting manually when no shadow DOM in use
-                        lightDOMSlotting(root, content);
-                        dbg('Slots initialized');
-                    }
+                        const content = /** @type {DocumentFragment} */ (this._template.content.cloneNode(true));
 
-                    // nodes having placeholder references, and thus need to be updated when attributes change.
-                    /** @type {[Node,string,string][]} */
-                    this._boundNodes = [];
-                    
-                    // 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])));
+                        if (this._shadow === 'none') {
+                            // Implement slotting manually when no shadow DOM in use
+                            lightDOMSlotting(this._shadowRoot, content);
+                            dbg('Slots initialized');
+                        }
+
+                        // nodes having placeholder references, and thus need to be updated when attributes change.
+                        /** @type {[Node,string,string][]} */
+                        this._boundNodes = [];
+                        
+                        // 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));
+                        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));
+                                }
+                            })).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(' '));
                             }
-                        })).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.join(' '));
+                            this.setAttribute('data-decue-observed-attributes', observedAttrs.join(' '));
+                        }
+                        
+                        this._shadowRoot.append(content);
+                        this._boundNodes.forEach(x => updatePlaceholders(ths, x));
 
-                    fireEvent(this, 'connect');
-                };
+                        fireEvent(this, 'connect');
+                    };
 
-                if (template) {
-                    finalize();
-                } else {
-                    // predefined element. Finalize only after the children are parsed.
-                    /** @type {MutationObserver} */
-                    const observer = new MutationObserver(() => {
-                        observer.disconnect();
+                    if (template) {
                         finalize();
-                    });
-                    observer.observe(this.parentElement, { childList: true });
+                    } else {
+                        // predefined element. Finalize only after the children are parsed.
+                        /** @type {MutationObserver} */
+                        const observer = new MutationObserver(() => {
+                            observer.disconnect();
+                            finalize();
+                        });
+                        observer.observe(this.parentElement, { childList: true });
+                    }
                 }
             }
 
@@ -321,7 +324,9 @@ var decue = (function() {
                     .filter(obj => obj.getAttribute('type') === 'text/html')
                     .forEach(obj => {
                         obj.addEventListener('load', () => [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate));
-                        [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate);
+                        if (obj.contentDocument) {
+                            [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate);
+                        }
                     });
     });
 

package/dist/decue.min.js

@@ -1 +1 @@
-var decue=function(){const d=document.currentScript.getAttribute("shadow")||"none";if(!["open","closed","none"].includes(d)){throw`Invalid default shadow DOM mode "${d}". Must be one of "open", "closed" or "none".`}const a=/{([a-zA-Z_0-9]+)((?:\|[.]?[a-zA-Z_0-9]+)*)}/g;const c=t=>!(t==="shadow"||t.startsWith("decue-"));const u=t=>{var e=t;while(e&&e.parentNode){if(e.parentNode===document){return true}else if(e.parentNode instanceof ShadowRoot){e=e.parentNode.host}else{e=e.parentNode}}return false};const n=o=>(t,e)=>{const s=e.startsWith(".")?e.substring(1):undefined;const i=window[e];if(!s&&!i){throw`Global function "${e}" not found. Make sure to include it (not deferred) before this element is created.`}return s?typeof t[s]==="function"?t[s]():t[s]:i.apply(o,[t])};const r=(i,o,t)=>t.replaceAll(a,(t,e,s)=>o.hasAttribute(e)?s.split("|").slice(1).reduce(n(i),o.getAttribute(e)):t);const h=(t,[e,s,i])=>{const o=r(e,t,s);if(e instanceof Text){if(o!==e.data){e.data=o}}else if(e instanceof HTMLElement){if(o!==e.getAttribute(i)){e.setAttribute(i,o)}}};const f=(t,s)=>{const e=document.createTreeWalker(t,NodeFilter.SHOW_TEXT|NodeFilter.SHOW_ELEMENT);while(e.nextNode()){const i=e.currentNode;if(i instanceof Text){[...i.data.matchAll(a)].forEach(t=>s(i,undefined,t[1]))}else if(i instanceof HTMLElement){i.getAttributeNames().forEach(e=>[...i.getAttribute(e).matchAll(a)].forEach(t=>s(i,e,t[1])))}}};const b=(i,t)=>{t.querySelectorAll("slot[name]").forEach(t=>{const e=i.querySelectorAll(`:scope > [slot="${t.getAttribute("name")}"]`);const s=e.length>0?e:t.children;t.replaceWith.apply(t,s)});const e=t.querySelector("slot:not([name])");if(e){const s=[...i.childNodes].filter(t=>t.nodeType!==Node.ELEMENT_NODE||!t.hasAttribute("slot"));const o=s.length>0?s:e.children;e.replaceWith.apply(e,o)}};const i=(o,a,n,t,e)=>{const r=t=>o?console.log(a+": "+t):undefined;var l=e;if(n){f(n.content,(t,e,s)=>l.push(s))}l=[...new Set(l.filter(c))];window.customElements.define(a,class extends HTMLElement{static formAssociated=t;static observedAttributes=l;constructor(){super();this._template=n||[...document.getElementsByTagName("template")].find(t=>t.getAttribute("decue")===a);if(!this._template){throw`Template for "${a}" not found. Make sure it comes in the DOM before any corresponding custom element.`}if(!t&&this._template.hasAttribute("formAssociated")){throw`Cannot declare a predefined custom element "${a}" as formAssociated. Move it from elements="..." to formAssociated="...".`}const i=this;this.getAttributeNames().filter(t=>t.startsWith("decue-on:")).map(t=>t.substring("decue-on:".length)).forEach(t=>{const e=i.getAttribute("decue-on:"+t);const s=window[e];if(!s){throw`Global handler function "${e}" for event "${t}" not found.`}r("Registering event listener for event: "+t);i.addEventListener(t,s)});if(t){const o=this.attachInternals();var s=this.getAttribute("value");r("Making form-associated with value: "+s);Object.defineProperties(this,{internals:{value:o,writable:false},value:{get:()=>s,set:t=>{s=t;o.setFormValue(s);i.checkValidity()}},name:{get:()=>this.getAttribute("name")},form:{get:()=>o.form},labels:{get:()=>o.labels},validity:{get:()=>o.validity},validationMessage:{get:()=>o.validationMessage},willValidate:{get:()=>o.willValidate},setFormValue:{value:(t,e)=>o.setFormValue(s=t,e),writable:false},setValidity:{value:o.setValidity.bind(o),writable:false},checkValidity:{value:()=>{m(i,"checkvalidity");return o.checkValidity()},writable:false},reportValidity:{value:o.reportValidity.bind(o),writable:false}});this.value=s;if(!this.hasAttribute("tabindex")){this.tabIndex=0}}}connectedCallback(){this._shadow=this.getAttribute("shadow")||this._template.getAttribute("shadow")||d;if(!["open","closed","none"].includes(this._shadow)){throw`Invalid shadow DOM mode "${this._shadow}" for element "${a}". Must be one of "open", "closed" or "none".`}const t=this._shadow==="none"?this:this.attachShadow({mode:this._shadow,delegatesFocus:true});const i=this._template.content.cloneNode(true);const e=()=>{r("Finalizing...");if(this._shadow==="none"){b(t,i);r("Slots initialized")}this._boundNodes=[];[i,this].forEach(t=>f(t,(t,e,s)=>this._boundNodes.push(t instanceof HTMLElement?[t,t.getAttribute(e),e]:[t,t.data,undefined])));const e=this;const s=this.getAttributeNames().filter(c).filter(t=>!l.includes(t));if(s.length>0&&this._boundNodes.length>0){new MutationObserver(t=>t.forEach(t=>{if(s.includes(t.attributeName)){e.attributeChangedCallback(t.attributeName,t.oldValue,t.target.getAttribute(t.attributeName))}})).observe(this,{attributes:true});this._decueMutationObserved=true;if(o){r("Observing attributes with MutationObserver: "+s.join(" "));this.setAttribute("data-decue-mutation-observed-attributes",s.join(" "))}}if(o&&l.length>0){r("Observing attributes with observedAttributes: "+l.join(" "));this.setAttribute("data-decue-observed-attributes",l.join(" "))}t.append(i);this._boundNodes.forEach(t=>h(e,t));m(this,"connect")};if(n){e()}else{const s=new MutationObserver(()=>{s.disconnect();e()});s.observe(this.parentElement,{childList:true})}}attributeChangedCallback(t,e,s){if(e!==s){if(t==="value"&&this.value!==s){this.value=s}if(this._boundNodes){const i=this._boundNodes.filter(([t,e])=>u(t));if(i.length!==this._boundNodes.length){this._boundNodes=i}const o=this;this._boundNodes.forEach(t=>h(o,t))}m(this,"attributechange",{name:t,oldValue:e,newValue:s})}}disconnectedCallback(){m(this,"disconnect")}adoptedCallback(){m(this,"adopt")}formAssociatedCallback(t){m(this,"formassociate",{form:t})}formDisabledCallback(t){m(this,"formdisable",{disabled:t})}formResetCallback(){m(this,"formreset")}formStateRestoreCallback(t,e){m(this,"formstaterestore",{state:t,mode:e})}})};const m=(t,e,s)=>{t.dispatchEvent(new CustomEvent(e,{detail:s||{},bubbles:true}))};const o=document.currentScript.hasAttribute("debug");[{attr:"elements",formAssociated:false},{attr:"form-associated",formAssociated:true}].forEach(({attr:t,formAssociated:s})=>{if(document.currentScript.hasAttribute(t)){document.currentScript.getAttribute(t).split(/\s+/).map(t=>t.split(/\[|]/)).forEach(([t,e])=>i(o,t,undefined,s,e?e.split(","):[]))}});const e=t=>{const e=t.getAttribute("decue");if(e&&!window.customElements.get(e)){i(o,e,t,t.hasAttribute("form-associated"),[])}};window.addEventListener("DOMContentLoaded",()=>{[...document.getElementsByTagName("template")].forEach(e);[...document.getElementsByTagName("object")].filter(t=>t.getAttribute("type")==="text/html").forEach(t=>{t.addEventListener("load",()=>[...t.contentDocument.getElementsByTagName("template")].forEach(e));[...t.contentDocument.getElementsByTagName("template")].forEach(e)})});return{processTemplate:e,defineElement:i}}();
+var decue=function(){const o=document.currentScript.getAttribute("shadow")||"none";if(!["open","closed","none"].includes(o)){throw`Invalid default shadow DOM mode "${o}". Must be one of "open", "closed" or "none".`}const a=/{([a-zA-Z_0-9]+)((?:\|[.]?[a-zA-Z_0-9]+)*)}/g;const l=t=>!(t==="shadow"||t.startsWith("decue-"));const d=t=>{var e=t;while(e&&e.parentNode){if(e.parentNode===document){return true}else if(e.parentNode instanceof ShadowRoot){e=e.parentNode.host}else{e=e.parentNode}}return false};const n=i=>(t,e)=>{const o=e.startsWith(".")?e.substring(1):undefined;const s=window[e];if(!o&&!s){throw`Global function "${e}" not found. Make sure to include it (not deferred) before this element is created.`}return o?typeof t[o]==="function"?t[o]():t[o]:s.apply(i,[t])};const r=(s,i,t)=>t.replaceAll(a,(t,e,o)=>i.hasAttribute(e)?o.split("|").slice(1).reduce(n(s),i.getAttribute(e)):t);const c=(t,[e,o,s])=>{const i=r(e,t,o);if(e instanceof Text){if(i!==e.data){e.data=i}}else if(e instanceof HTMLElement){if(i!==e.getAttribute(s)){e.setAttribute(s,i)}}};const u=(t,o)=>{const e=document.createTreeWalker(t,NodeFilter.SHOW_TEXT|NodeFilter.SHOW_ELEMENT);while(e.nextNode()){const s=e.currentNode;if(s instanceof Text){[...s.data.matchAll(a)].forEach(t=>o(s,undefined,t[1]))}else if(s instanceof HTMLElement){s.getAttributeNames().forEach(e=>[...s.getAttribute(e).matchAll(a)].forEach(t=>o(s,e,t[1])))}}};const h=(s,t)=>{t.querySelectorAll("slot[name]").forEach(t=>{const e=s.querySelectorAll(`:scope > [slot="${t.getAttribute("name")}"]`);const o=e.length>0?e:t.children;t.replaceWith.apply(t,o)});const e=t.querySelector("slot:not([name])");if(e){const o=[...s.childNodes].filter(t=>t.nodeType!==Node.ELEMENT_NODE||!t.hasAttribute("slot"));const i=o.length>0?o:e.children;e.replaceWith.apply(e,i)}};const s=(s,a,n,t,e)=>{const r=t=>s?console.log(a+": "+t):undefined;var i=e;if(n){u(n.content,(t,e,o)=>i.push(o))}i=[...new Set(i.filter(l))];window.customElements.define(a,class extends HTMLElement{static formAssociated=t;static observedAttributes=i;constructor(){super();this._template=n||[...document.getElementsByTagName("template")].find(t=>t.getAttribute("decue")===a);if(!this._template){throw`Template for "${a}" not found. Make sure it comes in the DOM before any corresponding custom element.`}if(!t&&this._template.hasAttribute("formAssociated")){throw`Cannot declare a predefined custom element "${a}" as formAssociated. Move it from elements="..." to formAssociated="...".`}const s=this;this.getAttributeNames().filter(t=>t.startsWith("decue-on:")).map(t=>t.substring("decue-on:".length)).forEach(t=>{const e=s.getAttribute("decue-on:"+t);const o=window[e];if(!o){throw`Global handler function "${e}" for event "${t}" not found.`}r("Registering event listener for event: "+t);s.addEventListener(t,o)});if(t){const i=this.attachInternals();var o=this.getAttribute("value");r("Making form-associated with value: "+o);Object.defineProperties(this,{internals:{value:i,writable:false},value:{get:()=>o,set:t=>{o=t;i.setFormValue(o);s.checkValidity()}},name:{get:()=>this.getAttribute("name")},form:{get:()=>i.form},labels:{get:()=>i.labels},validity:{get:()=>i.validity},validationMessage:{get:()=>i.validationMessage},willValidate:{get:()=>i.willValidate},setFormValue:{value:(t,e)=>i.setFormValue(o=t,e),writable:false},setValidity:{value:i.setValidity.bind(i),writable:false},checkValidity:{value:()=>{f(s,"checkvalidity");return i.checkValidity()},writable:false},reportValidity:{value:i.reportValidity.bind(i),writable:false}});this.value=o;if(!this.hasAttribute("tabindex")){this.tabIndex=0}}}connectedCallback(){this._shadow=this.getAttribute("shadow")||this._template.getAttribute("shadow")||o;if(!["open","closed","none"].includes(this._shadow)){throw`Invalid shadow DOM mode "${this._shadow}" for element "${a}". Must be one of "open", "closed" or "none".`}if(!this._shadowRoot){this._shadowRoot=this._shadow==="none"?this:this.attachShadow({mode:this._shadow,delegatesFocus:true});const t=()=>{r("Finalizing...");const t=this._template.content.cloneNode(true);if(this._shadow==="none"){h(this._shadowRoot,t);r("Slots initialized")}this._boundNodes=[];[t,this].forEach(t=>u(t,(t,e,o)=>this._boundNodes.push(t instanceof HTMLElement?[t,t.getAttribute(e),e]:[t,t.data,undefined])));const e=this;const o=this.getAttributeNames().filter(l).filter(t=>!i.includes(t));if(o.length>0&&this._boundNodes.length>0){new MutationObserver(t=>t.forEach(t=>{if(o.includes(t.attributeName)){e.attributeChangedCallback(t.attributeName,t.oldValue,t.target.getAttribute(t.attributeName))}})).observe(this,{attributes:true});this._decueMutationObserved=true;if(s){r("Observing attributes with MutationObserver: "+o.join(" "));this.setAttribute("data-decue-mutation-observed-attributes",o.join(" "))}}if(s&&i.length>0){r("Observing attributes with observedAttributes: "+i.join(" "));this.setAttribute("data-decue-observed-attributes",i.join(" "))}this._shadowRoot.append(t);this._boundNodes.forEach(t=>c(e,t));f(this,"connect")};if(n){t()}else{const e=new MutationObserver(()=>{e.disconnect();t()});e.observe(this.parentElement,{childList:true})}}}attributeChangedCallback(t,e,o){if(e!==o){if(t==="value"&&this.value!==o){this.value=o}if(this._boundNodes){const s=this._boundNodes.filter(([t,e])=>d(t));if(s.length!==this._boundNodes.length){this._boundNodes=s}const i=this;this._boundNodes.forEach(t=>c(i,t))}f(this,"attributechange",{name:t,oldValue:e,newValue:o})}}disconnectedCallback(){f(this,"disconnect")}adoptedCallback(){f(this,"adopt")}formAssociatedCallback(t){f(this,"formassociate",{form:t})}formDisabledCallback(t){f(this,"formdisable",{disabled:t})}formResetCallback(){f(this,"formreset")}formStateRestoreCallback(t,e){f(this,"formstaterestore",{state:t,mode:e})}})};const f=(t,e,o)=>{t.dispatchEvent(new CustomEvent(e,{detail:o||{},bubbles:true}))};const i=document.currentScript.hasAttribute("debug");[{attr:"elements",formAssociated:false},{attr:"form-associated",formAssociated:true}].forEach(({attr:t,formAssociated:o})=>{if(document.currentScript.hasAttribute(t)){document.currentScript.getAttribute(t).split(/\s+/).map(t=>t.split(/\[|]/)).forEach(([t,e])=>s(i,t,undefined,o,e?e.split(","):[]))}});const e=t=>{const e=t.getAttribute("decue");if(e&&!window.customElements.get(e)){s(i,e,t,t.hasAttribute("form-associated"),[])}};window.addEventListener("DOMContentLoaded",()=>{[...document.getElementsByTagName("template")].forEach(e);[...document.getElementsByTagName("object")].filter(t=>t.getAttribute("type")==="text/html").forEach(t=>{t.addEventListener("load",()=>[...t.contentDocument.getElementsByTagName("template")].forEach(e));if(t.contentDocument){[...t.contentDocument.getElementsByTagName("template")].forEach(e)}})});return{processTemplate:e,defineElement:s}}();

package/examples.html

@@ -45,6 +45,18 @@
             document.querySelector('[data-modifyvalues]').addEventListener('click', () => {
                 document.querySelectorAll('[value]').forEach(x => {x.value = 'hello ' + x.value; x.dispatchEvent(new Event('change'));});
             });
+
+            setTimeout(() => {
+                document.querySelectorAll('.remove-then-append nested-element-with-attribute').forEach(el => {
+                    const parent = el.parentNode;
+                    parent.removeChild(el);
+                    parent.appendChild(el);
+                });
+
+                document.querySelectorAll('.move nested-element-with-attribute').forEach(el => {
+                    el.parentNode.moveBefore(el, null);
+                });
+            }, 1000);
         });
     </script>
     <script src="src/decue.js" debug elements="predefined-element predefined-element-with-attributes predefined-element-with-slot"></script>
@@ -270,6 +282,48 @@
                     </fieldset>
                 </td>
             </tr>
+
+            <tr>
+                <td>
+                    <fieldset class="remove-then-append">
+                        <legend>remove-then-append</legend>
+                        <nested-element-with-attribute greetings="World!"></nested-element-with-attribute>
+                    </fieldset>
+                </td>
+                <td>
+                    <fieldset class="remove-then-append">
+                        <legend>remove-then-append</legend>
+                        <nested-element-with-attribute greetings="World!" shadow="open"></nested-element-with-attribute>
+                    </fieldset>
+                </td>
+                <td>
+                    <fieldset class="remove-then-append">
+                        <legend>remove-then-append</legend>
+                        <nested-element-with-attribute greetings="World!" shadow="closed"></nested-element-with-attribute>
+                    </fieldset>
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <fieldset class="move">
+                        <legend>move</legend>
+                        <nested-element-with-attribute greetings="World!"></nested-element-with-attribute>
+                    </fieldset>
+                </td>
+                <td>
+                    <fieldset class="move">
+                        <legend>move</legend>
+                        <nested-element-with-attribute greetings="World!" shadow="open"></nested-element-with-attribute>
+                    </fieldset>
+                </td>
+                <td>
+                    <fieldset class="move">
+                        <legend>move</legend>
+                        <nested-element-with-attribute greetings="World!" shadow="closed"></nested-element-with-attribute>
+                    </fieldset>
+                </td>
+            </tr>
         </table>
     </main>
 

package/external.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <template decue="external-element">
     <slot><div title="an external element with default slot">default slot: Hello {greetings}</div></slot>
 </template>

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "decue",
-  "version": "1.0.0",
-  "description": "",
+  "version": "1.0.1",
+  "description": "Declarative Custom Elements. Create simple web components with just HTML, parameterized with slots and attributes. With or without shadow-dom.",
   "author": "Jyri-Matti Lähteenmäki <jyri-matti@lahteenmaki.net>",
-  "keywords": [],
+  "keywords": [
+    "html",
+    "web-component",
+    "custom-element"
+  ],
   "license": "MIT",
   "scripts": {
     "test": "mocha-chrome test/index.html",
@@ -12,7 +16,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://codeberg.org/jyri-matti/decue.git"
+    "url": "https://codeberg.org/jyri-matti/decue.git"
   },
   "devDependencies": {
     "chai": "^4.3.6",

package/src/decue.js

@@ -195,64 +195,67 @@ 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 });
+                    
+                    const finalize = () => {
+                        dbg('Finalizing...');
 
-                    if (this._shadow === 'none') {
-                        // Implement slotting manually when no shadow DOM in use
-                        lightDOMSlotting(root, content);
-                        dbg('Slots initialized');
-                    }
+                        const content = /** @type {DocumentFragment} */ (this._template.content.cloneNode(true));
 
-                    // nodes having placeholder references, and thus need to be updated when attributes change.
-                    /** @type {[Node,string,string][]} */
-                    this._boundNodes = [];
-                    
-                    // 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])));
+                        if (this._shadow === 'none') {
+                            // Implement slotting manually when no shadow DOM in use
+                            lightDOMSlotting(this._shadowRoot, content);
+                            dbg('Slots initialized');
+                        }
+
+                        // nodes having placeholder references, and thus need to be updated when attributes change.
+                        /** @type {[Node,string,string][]} */
+                        this._boundNodes = [];
+                        
+                        // 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));
+                        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));
+                                }
+                            })).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(' '));
                             }
-                        })).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.join(' '));
+                            this.setAttribute('data-decue-observed-attributes', observedAttrs.join(' '));
+                        }
+                        
+                        this._shadowRoot.append(content);
+                        this._boundNodes.forEach(x => updatePlaceholders(ths, x));
 
-                    fireEvent(this, 'connect');
-                };
+                        fireEvent(this, 'connect');
+                    };
 
-                if (template) {
-                    finalize();
-                } else {
-                    // predefined element. Finalize only after the children are parsed.
-                    /** @type {MutationObserver} */
-                    const observer = new MutationObserver(() => {
-                        observer.disconnect();
+                    if (template) {
                         finalize();
-                    });
-                    observer.observe(this.parentElement, { childList: true });
+                    } else {
+                        // predefined element. Finalize only after the children are parsed.
+                        /** @type {MutationObserver} */
+                        const observer = new MutationObserver(() => {
+                            observer.disconnect();
+                            finalize();
+                        });
+                        observer.observe(this.parentElement, { childList: true });
+                    }
                 }
             }
 
@@ -321,7 +324,9 @@ var decue = (function() {
                     .filter(obj => obj.getAttribute('type') === 'text/html')
                     .forEach(obj => {
                         obj.addEventListener('load', () => [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate));
-                        [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate);
+                        if (obj.contentDocument) {
+                            [...obj.contentDocument.getElementsByTagName('template')].forEach(processTemplate);
+                        }
                     });
     });