mount-observer 0.0.70 → 0.0.72

package/MountObserver.js

@@ -67,22 +67,38 @@ export class MountObserver extends EventTarget {
         }
     }
     async #compose(el, level) {
-        if (el.hasAttribute('src')) {
-            const { compose } = await import('./compose.js');
-            await compose(this, el, level);
-        }
+        const src = el.getAttribute('src');
+        if (src === null || src.length < 2)
+            return;
+        const refType = src[0];
+        if (!['!', '#'].includes(refType))
+            return;
+        const { compose } = await import('./compose.js');
+        await compose(this, el, level, src.substring(1), refType);
     }
     #templLookUp = new Map();
-    async findByID(id, fragment) {
-        if (this.#templLookUp.has(id))
-            return this.#templLookUp.get(id);
-        let templ = fragment.querySelector(`#${id}`);
+    #searchForComment(refName, fragment) {
+        const iterator = document.evaluate(`//comment()[.="${refName}"]`, fragment, null, XPathResult.ANY_TYPE, null);
+        //console.log({xpathResult})
+        try {
+            let thisNode = iterator.iterateNext();
+            return thisNode;
+        }
+        catch (e) {
+            return null;
+        }
+    }
+    async findByID(refName, fragment, refType) {
+        if (this.#templLookUp.has(refName))
+            return this.#templLookUp.get(refName);
+        let templ = null;
+        templ = refType === '#' ? fragment.querySelector(`#${refName}`) : this.#searchForComment(refName, fragment);
         if (templ === null) {
             let rootToSearchOutwardFrom = ((fragment.isConnected ? fragment.getRootNode() : this.#mountInit.withTargetShadowRoot) || document);
-            templ = rootToSearchOutwardFrom.getElementById(id);
+            templ = refType === '#' ? rootToSearchOutwardFrom.getElementById(refName) : this.#searchForComment(refName, rootToSearchOutwardFrom);
             while (templ === null && rootToSearchOutwardFrom !== document) {
                 rootToSearchOutwardFrom = (rootToSearchOutwardFrom.host || rootToSearchOutwardFrom).getRootNode();
-                templ = rootToSearchOutwardFrom.getElementById(id);
+                templ = refType === '#' ? rootToSearchOutwardFrom.getElementById(refName) : this.#searchForComment(refName, rootToSearchOutwardFrom);
             }
         }
         if (templ !== null) {
@@ -98,20 +114,27 @@ export class MountObserver extends EventTarget {
                 let first = true;
                 for (const adjRef of adjRefs) {
                     const clone = adjRef.cloneNode(true);
-                    if (first && adjRefs.length > 1) {
-                        clone.setAttribute('itemref', '<autogen>');
-                        newTempl[wasItemReffed] = true;
-                        first = false;
+                    if (refType === '#' && clone instanceof Element) {
+                        if (first && adjRefs.length > 1) {
+                            clone.setAttribute('itemref', '<autogen>');
+                            newTempl[wasItemReffed] = true;
+                            first = false;
+                        }
+                        clone.removeAttribute('id');
                     }
-                    clone.removeAttribute('id');
                     fragment.appendChild(clone);
                 }
-                const { doCleanup } = await import('./doCleanup.js');
-                doCleanup(templ, fragment);
+                if (templ instanceof Element) {
+                    const { doCleanup } = await import('./doCleanup.js');
+                    doCleanup(templ, fragment);
+                }
+                else {
+                    //TODO: cleanup
+                }
                 newTempl.content.appendChild(fragment);
                 templ = newTempl;
             }
-            this.#templLookUp.set(id, templ);
+            this.#templLookUp.set(refName, templ);
         }
         return templ;
     }
@@ -500,7 +523,7 @@ function areAllIdle(mutObs) {
     return true;
 }
 const refCountErr = 'mount-observer ref count mismatch';
-export const inclTemplQry = 'template[src^="#"]:not([hidden])';
+export const inclTemplQry = 'template[src^="#"]:not([hidden]),template[src^="!"]:not([hidden])';
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
 /**
  * The `mutation-event` event represents something that happened.

package/MountObserver.ts

@@ -4,7 +4,8 @@ import {MountInit, IMountObserver, AddMutationEventListener,
     AttrParts,
     MOSE, WeakDual,
     MountObserverOptions,
-    Assigner
+    Assigner,
+    RefType
 } from './ts-refs/mount-observer/types';
 import {RootMutObs} from './RootMutObs.js';
 import {bindish, bindishIt} from './bindish.js';
@@ -81,24 +82,48 @@ export class MountObserver extends EventTarget implements IMountObserver{
 
 
     async #compose(el: HTMLTemplateElement, level: number){
-        if(el.hasAttribute('src')){
-            const {compose} = await import('./compose.js');
-            await compose(this, el, level);
-        }
+        const src = el.getAttribute('src');
+        if(src === null || src.length < 2) return;
+        const refType = src[0] as RefType;
+        if(!['!', '#'].includes(refType)) return;
+        const {compose} = await import('./compose.js');
+        await compose(this, el, level, src.substring(1), refType);
+        
 
     }
     #templLookUp: Map<string, HTMLElement> = new Map();
-    async findByID(id: string, fragment: DocumentFragment): Promise<HTMLElement | null>{
-        if(this.#templLookUp.has(id)) return this.#templLookUp.get(id)!;
-        let templ = fragment.querySelector(`#${id}`);
+    #searchForComment(refName: string, fragment: Node){
+        const iterator = document.evaluate(
+        `//comment()[.="${refName}"]`,
+        fragment,
+        null,
+        XPathResult.ANY_TYPE,
+        null
+        );
+        //console.log({xpathResult})
+        try {
+            let thisNode = iterator.iterateNext();
+            return thisNode;
+        }catch(e){
+            return null;
+        }
+    }
+    async findByID(
+        refName: string, fragment: DocumentFragment, 
+        refType: RefType): Promise<HTMLElement | DocumentFragment | null>{
+        if(this.#templLookUp.has(refName)) return this.#templLookUp.get(refName)!;
+        let templ: Node | null = null;
+        templ = refType === '#' ? fragment.querySelector(`#${refName}`) : this.#searchForComment(refName, fragment);
         if(templ === null){
             let rootToSearchOutwardFrom = ((fragment.isConnected ? fragment.getRootNode() : this.#mountInit.withTargetShadowRoot) || document) as any;
-            templ = rootToSearchOutwardFrom.getElementById(id);
+            templ = refType === '#' ? rootToSearchOutwardFrom.getElementById(refName) : this.#searchForComment(refName, rootToSearchOutwardFrom);
             while(templ === null && rootToSearchOutwardFrom !== (document as any as DocumentFragment) ){
                 rootToSearchOutwardFrom = (rootToSearchOutwardFrom.host || rootToSearchOutwardFrom).getRootNode() as DocumentFragment;
-                templ = rootToSearchOutwardFrom.getElementById(id);
+                templ = refType === '#' ? rootToSearchOutwardFrom.getElementById(refName) : this.#searchForComment(refName, rootToSearchOutwardFrom);
             }
         }
+
+
         if(templ !== null) {
             if(!(templ instanceof HTMLTemplateElement)){
                 const newTempl = document.createElement('template');
@@ -112,20 +137,29 @@ export class MountObserver extends EventTarget implements IMountObserver{
                 let first = true;
                 for(const adjRef of adjRefs){
                     const clone = adjRef.cloneNode(true) as HTMLElement;
-                    if(first && adjRefs.length > 1){
-                        clone.setAttribute('itemref', '<autogen>');
-                        (<any>newTempl)[wasItemReffed] = true;
-                        first = false;
+                    if(refType === '#' && clone instanceof Element){
+                        if(first && adjRefs.length > 1){
+                            clone.setAttribute('itemref', '<autogen>');
+                            (<any>newTempl)[wasItemReffed] = true;
+                            first = false;
+                        }
+                        clone.removeAttribute('id');
                     }
-                    clone.removeAttribute('id');
+                    
                     fragment.appendChild(clone);
                 }
-                const {doCleanup} = await import('./doCleanup.js');
-                doCleanup(templ as HTMLElement, fragment);
+                if(templ instanceof Element){
+                    const {doCleanup} = await import('./doCleanup.js');
+                    doCleanup(templ as HTMLElement, fragment);
+                    
+                }else{
+                    //TODO: cleanup
+                }
                 newTempl.content.appendChild(fragment);
                 templ = newTempl;
+                
             }
-            this.#templLookUp.set(id, templ as HTMLTemplateElement);
+            this.#templLookUp.set(refName, templ as HTMLTemplateElement);
         }
         return templ as HTMLTemplateElement;
     }
@@ -523,7 +557,7 @@ function areAllIdle(mutObs: Array<RootMutObs>){
 
 
 const refCountErr = 'mount-observer ref count mismatch';
-export const inclTemplQry = 'template[src^="#"]:not([hidden])';
+export const inclTemplQry = 'template[src^="#"]:not([hidden]),template[src^="!"]:not([hidden])';
 
 export interface MountObserver extends IMountObserver{}
 

package/README.md

@@ -769,8 +769,8 @@ For example:
 <div>Your Mother Should Know</div>
 <div>I Am the Walrus</div>
 <template src=#id-of-source-template>
-   <span slot=slot1>hello</span>
-   <span slot=slot2>goodbye<span>
+   <span part=greeting>hello</span>
+   <span part=parting>goodbye<span>
 </template>
 <div>Strawberry Fields Forever</div>
 ```
@@ -781,24 +781,45 @@ Let's say the source template looks as follows:
 
 ```html
 <template id=id-of-source-template>
-   <div>I don't know why you say <slot name=slot2></slot> I say <slot name=slot1></slot></div>
+   <div>
+      You say, <span part=parting></span> and I say, 
+      <span part=greeting></span>, <span part=greeting></span>, <span part=greeting></span>
+   </div>
+   <div>
+      I don't know why you say 
+      <span part=greeting></span> 
+       I say 
+      <span part=parting></span>
+   </div>
 </template>
 ```
 
-What we would end up with is:
+What we end up with is:
 
 
 ```html
 <div>Your Mother Should Know</div>
 <div>I Am the Walrus</div>
-<div>I don't know why you say <span>goodbye</span> I say <span>hello</span></div>
+<?+?>
+<div>
+   You say, <span part=parting>goodbye</span> and I say, 
+   <span part=greeting>hello</span>, <span part=greeting>hello</span>, <span part=greeting>hello</span>
+</div>
+<div>
+   I don't know why you say 
+   <span part=greeting>goodbye</span>
+    I say 
+   <span part=parting>hello</span>
+</div>
+<?-?>
 <div>Strawberry Fields Forever</div>
 ```
 
-Some significant differences with genuine slot support as used with (ShadowDOM'd) custom elements
+Some significant differences with slot support as used with (ShadowDOM'd) custom elements
 
-1.  There is no mechanism for updating the slots.  That is something under investigation with this userland [custom enhancement](https://github.com/bahrus/be-inclusive), that could possibly lead to a future implementation request tied to template instantiation.  It takes the approach of morphing from slots to a JS host object model that binds to where all the slots were "from a distance".
-2.  ShadowDOM's slots act on a "many to one" basis.  Multiple light children with identical slot identifiers all get merged into a single (first?) matching slot within the Shadow DOM.  These "birtual" (birth-only, virtual) inclusions, instead, follow the opposite approach -- a single element with a slot identifier can get cloned into multiple slot targets as it weaves itself into the templates as they get merged together.
+1.  The mechanism to weave DOM together is more flexible here:  We are searching for DOM elements that match all the attributes of the children of the *target* template, that template that is pulling in the intra document source template.  The "part" attribute was used just as an example.
+2.  There is no mechanism for updating the slots.  That is something under investigation with this userland [custom enhancement](https://github.com/bahrus/be-inclusive) that allows for updating the existing DOM tree based on identical syntax.
+2.  ShadowDOM's slots act on a "many to one" basis.  Multiple light children with identical slot identifiers all get merged into a single (first?) matching slot within the Shadow DOM.  These "birtual" (birth-only, virtual) inclusions, instead, follow the opposite approach -- a single element can get cloned into multiple slot targets as it weaves itself into the templates as they get merged together.
 
 ## Intra document html imports with Shadow DOM support
 

package/compose.js

@@ -1,19 +1,26 @@
-import { inclTemplQry, wasItemReffed } from './MountObserver.js';
+import { wasItemReffed } from './MountObserver.js';
+//import {prep} from './slotkin/affine.js';
+//goal:  deprecate this key, in favor of comments
 export const childRefsKey = Symbol.for('Wr0WPVh84k+O93miuENdMA');
 export const cloneKey = Symbol.for('LD97VKZYc02CQv23DT/6fQ');
 const autogenKey = Symbol.for('YpP5EP0i1UKcBBBH9tsm0w');
-export async function compose(self, el, level) {
+//const wrapped = Symbol.for('50tzQZt95ECXUtHF7a40og');
+export async function compose(self, el, level, refName, refType) {
     const src = el.getAttribute('src');
     if (src === null)
         return;
     el.removeAttribute('src');
-    const templID = src.substring(1);
+    //const templID = src!.substring(1);
+    //const refType = src![0];
     const fragment = self.objNde?.deref();
     if (fragment === undefined)
         return;
-    const templ = await self.findByID(templID, fragment);
+    const templ = await self.findByID(refName, fragment, refType);
     if (!(templ instanceof HTMLTemplateElement))
         throw 404;
+    if (refType === '#') {
+        (await import('./slotkin/wrap.js')).wrap(templ, refName);
+    }
     const clone = templ.content.cloneNode(true);
     const dataLd = el.dataset.ld;
     const wasReffed = templ[wasItemReffed];
@@ -48,63 +55,55 @@ export async function compose(self, el, level) {
             delete el.dataset.ld;
         }
     }
-    const slots = el.content.querySelectorAll(`[slot]`);
-    for (const slot of slots) {
-        const name = slot.getAttribute('slot');
-        const slotQry = `slot[name="${name}"]`;
-        const targets = Array.from(clone.querySelectorAll(slotQry));
-        const innerTempls = clone.querySelectorAll(inclTemplQry);
-        for (const innerTempl of innerTempls) {
-            const innerSlots = innerTempl.content.querySelectorAll(slotQry);
-            for (const innerSlot of innerSlots) {
-                targets.push(innerSlot);
-            }
-        }
-        for (const target of targets) {
-            const slotClone = slot.cloneNode(true);
-            target.after(slotClone);
-            target.remove();
+    if (el.content.childElementCount > 0) {
+        const { affine } = await import('./slotkin/affine.js');
+        const children = Array.from(el.content.children);
+        for (const child of children) {
+            //TODO support clean up
+            const mo = affine(clone, child);
         }
     }
     await self.composeFragment(clone, level + 1);
-    const shadowRootModeOnLoad = el.getAttribute('shadowRootModeOnLoad');
-    if (shadowRootModeOnLoad === null && level === 0) {
-        const slotMap = el.getAttribute('slotmap');
-        let map = slotMap === null ? undefined : JSON.parse(slotMap);
-        const slots = clone.querySelectorAll('[slot]');
-        for (const slot of slots) {
-            if (map !== undefined) {
-                const slotName = slot.slot;
-                for (const key in map) {
-                    if (slot.matches(key)) {
-                        const targetAttSymbols = map[key];
-                        for (const sym of targetAttSymbols) {
-                            switch (sym) {
-                                case '|':
-                                    slot.setAttribute('itemprop', slotName);
-                                    break;
-                                case '$':
-                                    slot.setAttribute('itemscope', '');
-                                    slot.setAttribute('itemprop', slotName);
-                                    break;
-                                case '@':
-                                    slot.setAttribute('name', slotName);
-                                    break;
-                                case '.':
-                                    slot.classList.add(slotName);
-                                    break;
-                                case '%':
-                                    slot.part.add(slotName);
-                                    break;
-                            }
-                        }
-                    }
-                }
-            }
-            slot.removeAttribute('slot');
-        }
-        el.dispatchEvent(new LoadEvent(clone));
-    }
+    // if (false) {
+    //     const shadowRootModeOnLoad = el.getAttribute('shadowRootModeOnLoad') as null | ShadowRootMode;
+    //     if (shadowRootModeOnLoad === null && level === 0) {
+    //         const slotMap = el.getAttribute('slotmap');
+    //         let map = slotMap === null ? undefined : JSON.parse(slotMap);
+    //         const slots = clone.querySelectorAll('[slot]');
+    //         for (const slot of slots) {
+    //             if (map !== undefined) {
+    //                 const slotName = slot.slot;
+    //                 for (const key in map) {
+    //                     if (slot.matches(key)) {
+    //                         const targetAttSymbols = map[key] as string;
+    //                         for (const sym of targetAttSymbols) {
+    //                             switch (sym) {
+    //                                 case '|':
+    //                                     slot.setAttribute('itemprop', slotName);
+    //                                     break;
+    //                                 case '$':
+    //                                     slot.setAttribute('itemscope', '');
+    //                                     slot.setAttribute('itemprop', slotName);
+    //                                     break;
+    //                                 case '@':
+    //                                     slot.setAttribute('name', slotName);
+    //                                     break;
+    //                                 case '.':
+    //                                     slot.classList.add(slotName);
+    //                                     break;
+    //                                 case '%':
+    //                                     slot.part.add(slotName);
+    //                                     break;
+    //                             }
+    //                         }
+    //                     }
+    //                 }
+    //             }
+    //             slot.removeAttribute('slot');
+    //         }
+    //         el.dispatchEvent(new LoadEvent(clone));
+    //     }
+    // }
     if (level === 0) {
         const refs = [];
         for (const child of clone.children) {
@@ -120,17 +119,14 @@ export async function compose(self, el, level) {
         cloneStashed = true;
     }
     else {
-        if (shadowRootModeOnLoad !== null) {
-            const parent = el.parentElement;
-            if (parent === null)
-                throw 404;
-            if (parent.shadowRoot === null)
-                parent.attachShadow({ mode: shadowRootModeOnLoad });
-            parent.shadowRoot?.append(clone);
-        }
-        else {
-            el.after(clone);
-        }
+        // if (false /*shadowRootModeOnLoad !== null */) {
+        //     const parent = el.parentElement;
+        //     if (parent === null) throw 404;
+        //     if (parent.shadowRoot === null) parent.attachShadow({ mode: shadowRootModeOnLoad });
+        //     parent.shadowRoot?.append(clone);
+        // } else {
+        el.after(clone);
+        //}
     }
     //moving the code down here broke be-inclusive Example2.html (but maybe it caused something else to work, so will need to revisit)
     //check to make sure the progresive loading of css-charts works as before.
@@ -138,7 +134,7 @@ export async function compose(self, el, level) {
     //     el.dispatchEvent(new LoadEvent(clone));
     // }
     if (!cloneStashed) {
-        if (level !== 0 || (slots.length === 0 && el.attributes.length === 0))
+        if (level !== 0 || el.attributes.length === 0)
             el.remove();
     }
 }

package/compose.ts

@@ -1,158 +1,164 @@
-import { ILoadEvent, loadEventName } from './ts-refs/mount-observer/types';
+import { ILoadEvent, loadEventName, RefType } from './ts-refs/mount-observer/types';
 import { MountObserver, inclTemplQry, wasItemReffed } from './MountObserver.js';
+//import {prep} from './slotkin/affine.js';
 
+//goal:  deprecate this key, in favor of comments
 export const childRefsKey = Symbol.for('Wr0WPVh84k+O93miuENdMA');
 export const cloneKey = Symbol.for('LD97VKZYc02CQv23DT/6fQ');
 const autogenKey = Symbol.for('YpP5EP0i1UKcBBBH9tsm0w');
+//const wrapped = Symbol.for('50tzQZt95ECXUtHF7a40og');
 export async function compose(
-    self: MountObserver, 
-    el: HTMLTemplateElement, 
-    level: number
-){
-    const src = el.getAttribute('src'); if(src === null) return;
+    self: MountObserver,
+    el: HTMLTemplateElement,
+    level: number,
+    refName: string,
+    refType: RefType,
+) {
+    const src = el.getAttribute('src'); if (src === null) return;
     el.removeAttribute('src');
-    const templID = src!.substring(1);
+    //const templID = src!.substring(1);
+    //const refType = src![0];
     const fragment = self.objNde?.deref() as DocumentFragment;
-    if(fragment === undefined) return;
-    const templ = await self.findByID(templID, fragment);
-    if(!(templ instanceof HTMLTemplateElement)) throw 404;
+    if (fragment === undefined) return;
+    const templ = await self.findByID(refName, fragment, refType);
+    if (!(templ instanceof HTMLTemplateElement)) throw 404;
+    if (refType === '#') {
+        (await import('./slotkin/wrap.js')).wrap(templ, refName);
+    }
+
     const clone = templ.content.cloneNode(true) as DocumentFragment;
     const dataLd = el.dataset.ld;
     const wasReffed = (<any>templ)[wasItemReffed];
-    if(wasReffed || dataLd){
+    if (wasReffed || dataLd) {
         const firstElement = clone.firstElementChild!;
-        if(wasReffed){
+        if (wasReffed) {
             let ns = firstElement.nextElementSibling;
             const ids = [];
             let count = (<any>window)[autogenKey];
-            if(count === undefined){
+            if (count === undefined) {
                 count = 0;
-            }else{
+            } else {
                 count++;
             }
             (<any>window)[autogenKey] = count;
-            while(ns !== null){
+            while (ns !== null) {
                 const id = ns.id = `mount-observer-${count}`;
                 ids.push(id);
                 ns = ns.nextElementSibling;
             }
             firstElement.setAttribute('itemref', ids.join(' '));
         }
-        
-        if(dataLd){
+
+        if (dataLd) {
             const parsed = JSON.parse(dataLd);
             let type = parsed['@type'];
             const itemscopeAttr = firstElement.getAttribute('itemscope');
-            if(type && !itemscopeAttr){
+            if (type && !itemscopeAttr) {
                 firstElement.setAttribute('itemscope', type);
             }
             (<any>firstElement)['ish'] = parsed;
             delete el.dataset.ld;
         }
-        
+
     }
-    const slots = el.content.querySelectorAll(`[slot]`);
+    if (el.content.childElementCount > 0) {
+        const { affine } = await import('./slotkin/affine.js');
+        const children = Array.from(el.content.children);
+        for (const child of children) {
+            //TODO support clean up
+            const mo = affine(clone, child);
 
-    for(const slot of slots){
-        const name = slot.getAttribute('slot')!;
-        const slotQry = `slot[name="${name}"]`;
-        const targets = Array.from(clone.querySelectorAll(slotQry));
-        const innerTempls = clone.querySelectorAll(inclTemplQry) as NodeListOf<HTMLTemplateElement>;
-        for(const innerTempl of innerTempls){
-            const innerSlots = innerTempl.content.querySelectorAll(slotQry);
-            for(const innerSlot of innerSlots){
-                targets.push(innerSlot);
-            }
-        }
-        for(const target of targets){
-            const slotClone = slot.cloneNode(true) as Element;
-            target.after(slotClone);
-            target.remove();
         }
+
     }
+
+
     await self.composeFragment(clone, level + 1);
-    const shadowRootModeOnLoad = el.getAttribute('shadowRootModeOnLoad') as null | ShadowRootMode;
-    if(shadowRootModeOnLoad === null && level === 0){
-        
-        const slotMap = el.getAttribute('slotmap');
-        let map = slotMap === null ? undefined : JSON.parse(slotMap);
-        const slots = clone.querySelectorAll('[slot]');
-        for(const slot of slots){
-            if(map !== undefined){
-                const slotName = slot.slot;
-                for(const key in map){
-                    if(slot.matches(key)){
-                        const targetAttSymbols = map[key] as string;
-                        for(const sym of targetAttSymbols){
-                            switch(sym){
-                                case '|':
-                                    slot.setAttribute('itemprop', slotName);
-                                    break;
-                                case '$':
-                                    slot.setAttribute('itemscope', '');
-                                    slot.setAttribute('itemprop', slotName);
-                                    break;
-                                case '@':
-                                    slot.setAttribute('name', slotName);
-                                    break;
-                                case '.':
-                                    slot.classList.add(slotName);
-                                    break;
-                                case '%':
-                                    slot.part.add(slotName);
-                                    break;
-                            }
-                        }
-                    }
-                }
-            }
-            slot.removeAttribute('slot');
-        }
-        el.dispatchEvent(new LoadEvent(clone));
-    }
-    if(level === 0){
+    // if (false) {
+    //     const shadowRootModeOnLoad = el.getAttribute('shadowRootModeOnLoad') as null | ShadowRootMode;
+    //     if (shadowRootModeOnLoad === null && level === 0) {
+
+    //         const slotMap = el.getAttribute('slotmap');
+    //         let map = slotMap === null ? undefined : JSON.parse(slotMap);
+    //         const slots = clone.querySelectorAll('[slot]');
+    //         for (const slot of slots) {
+    //             if (map !== undefined) {
+    //                 const slotName = slot.slot;
+    //                 for (const key in map) {
+    //                     if (slot.matches(key)) {
+    //                         const targetAttSymbols = map[key] as string;
+    //                         for (const sym of targetAttSymbols) {
+    //                             switch (sym) {
+    //                                 case '|':
+    //                                     slot.setAttribute('itemprop', slotName);
+    //                                     break;
+    //                                 case '$':
+    //                                     slot.setAttribute('itemscope', '');
+    //                                     slot.setAttribute('itemprop', slotName);
+    //                                     break;
+    //                                 case '@':
+    //                                     slot.setAttribute('name', slotName);
+    //                                     break;
+    //                                 case '.':
+    //                                     slot.classList.add(slotName);
+    //                                     break;
+    //                                 case '%':
+    //                                     slot.part.add(slotName);
+    //                                     break;
+    //                             }
+    //                         }
+    //                     }
+    //                 }
+    //             }
+    //             slot.removeAttribute('slot');
+    //         }
+    //         el.dispatchEvent(new LoadEvent(clone));
+    //     }
+    // }
+
+    if (level === 0) {
         const refs: Array<WeakRef<Element>> = [];
-        for(const child of clone.children){
+        for (const child of clone.children) {
             refs.push(new WeakRef(child));
         }
         (<any>el)[childRefsKey] = refs;
-        
+
     }
     //if template has itemscope attribute, assume want to do some data binding before instantiating into
     //DOM fragment.
     let cloneStashed = false;
-    if(el.hasAttribute('itemscope')){
+    if (el.hasAttribute('itemscope')) {
         (<any>el)[cloneKey] = clone;
         cloneStashed = true;
-    }else{
-        if(shadowRootModeOnLoad !== null){
-            const parent = el.parentElement;
-            if(parent === null) throw 404;
-            if(parent.shadowRoot === null) parent.attachShadow({mode: shadowRootModeOnLoad});
-            parent.shadowRoot?.append(clone);
-        }else{
+    } else {
+        // if (false /*shadowRootModeOnLoad !== null */) {
+        //     const parent = el.parentElement;
+        //     if (parent === null) throw 404;
+        //     if (parent.shadowRoot === null) parent.attachShadow({ mode: shadowRootModeOnLoad });
+        //     parent.shadowRoot?.append(clone);
+        // } else {
             el.after(clone);
-        }
+        //}
     }
     //moving the code down here broke be-inclusive Example2.html (but maybe it caused something else to work, so will need to revisit)
     //check to make sure the progresive loading of css-charts works as before.
     // if(level === 0){
     //     el.dispatchEvent(new LoadEvent(clone));
     // }
-    
-    if(!cloneStashed){
-        if(level !== 0 || (slots.length === 0 && el.attributes.length === 0)) el.remove();
+
+    if (!cloneStashed) {
+        if (level !== 0 || el.attributes.length === 0) el.remove();
     }
 
 }
 
-export class LoadEvent extends Event implements ILoadEvent{
+export class LoadEvent extends Event implements ILoadEvent {
     static eventName: loadEventName = 'load';
-    constructor(public clone: DocumentFragment){
+    constructor(public clone: DocumentFragment) {
         super(LoadEvent.eventName);
     }
 }
 
-interface HTMLElementEventMap{
+interface HTMLElementEventMap {
     'load': LoadEvent,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -64,6 +64,10 @@
     "./slotkin/beKindred.js": {
       "default": "./slotkin/beKindred.js",
       "types": "./slotkin/beKindred.ts"
+    },
+    "./slotkin/wrap.js": {
+      "default": "./slotkin/wrap.js",
+      "types": "./slotkin/wrap.ts"
     }
   },
   "files": [

package/refid/getAdjRefs.js

@@ -1,16 +1,38 @@
 import { splitRefs } from './splitRefs.js';
-export function getAdjRefs(el) {
-    const returnArr = [el];
-    const itemref = el.getAttribute('itemref');
-    if (itemref === null)
-        return returnArr;
-    const itemrefList = splitRefs(itemref); // itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
-    if (itemrefList.length === 0)
-        return returnArr;
-    let ns = el.nextElementSibling;
-    while (ns !== null && itemrefList.includes(ns.id)) {
-        returnArr.push(ns);
-        ns = ns.nextElementSibling;
+export function getAdjRefs(node) {
+    const returnArr = [node];
+    if (node.nodeType === node.COMMENT_NODE) {
+        const openText = node.data.split(' ')[0];
+        const closedText = `/${openText}`;
+        let ns = node.nextSibling;
+        while (ns) {
+            returnArr.push(ns);
+            if (node.nodeType === node.COMMENT_NODE && node.data === closedText) {
+                return returnArr;
+            }
+            ns = ns.nextSibling;
+        }
+    }
+    else {
+        const el = node;
+        const itemref = el.getAttribute('itemref');
+        if (itemref === null)
+            return returnArr;
+        const itemrefList = splitRefs(itemref); // itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
+        if (itemrefList.length === 0)
+            return returnArr;
+        let ns = el.nextSibling;
+        while (ns !== null) {
+            if (ns instanceof Element) {
+                if (ns.id && itemrefList.includes(ns.id)) {
+                    returnArr.push(ns);
+                }
+            }
+            else {
+                return returnArr;
+            }
+            ns = ns.nextSibling;
+        }
     }
     return returnArr;
 }

package/refid/getAdjRefs.ts

@@ -1,15 +1,37 @@
 import { splitRefs } from './splitRefs.js';
-export function getAdjRefs(el: Element): Array<Element>{
-    const returnArr = [el];
-    const itemref = el.getAttribute('itemref');
-    if(itemref === null) return returnArr;
-    const itemrefList = splitRefs(itemref);// itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
-    if(itemrefList.length === 0) return returnArr;
-    let ns = el.nextElementSibling;
-    while(ns !== null && itemrefList.includes(ns.id)){
-        returnArr.push(ns);
-        ns = ns.nextElementSibling;
+export function getAdjRefs(node: Node){
+    const returnArr: Array<Node> = [node];
+    if(node.nodeType === node.COMMENT_NODE){
+        const openText = (node as Comment).data.split(' ')[0];
+        const closedText = `/${openText}`;
+        let ns = node.nextSibling;
+        while(ns){
+            returnArr.push(ns);
+            if(node.nodeType === node.COMMENT_NODE && (node as Comment).data === closedText){
+                return returnArr;
+            }
+            ns = ns.nextSibling;
+        }
+    }else{
+        const el = node as Element;
+        const itemref = el.getAttribute('itemref');
+        if(itemref === null) return returnArr;
+        const itemrefList = splitRefs(itemref);// itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
+        if(itemrefList.length === 0) return returnArr;
+        let ns = el.nextSibling;
+        while(ns !== null){
+            if(ns instanceof Element){
+                if(ns.id && itemrefList.includes(ns.id)){
+                    returnArr.push(ns);
+                }
+            }else{
+                return returnArr;
+            }
+            ns = ns.nextSibling;
+        }
+        
     }
+
     return returnArr;
 }
 

package/slotkin/affine.js

@@ -0,0 +1,39 @@
+import { toQuery } from './toQuery.js';
+import { splitRefs } from '../refid/splitRefs.js';
+export function affine(fragment, el) {
+    const qry = toQuery(el);
+    const { elFragment, map } = prep(el);
+    const matches = Array.from(fragment.querySelectorAll(qry));
+    for (const match of matches) {
+        clone(match, elFragment, map);
+    }
+}
+export function prep(el) {
+    const elFragment = new DocumentFragment();
+    const clone = el.cloneNode(true);
+    for (const child of clone.childNodes) {
+        elFragment.appendChild(child);
+    }
+    const insertAttrs = el.getAttribute('-i');
+    let map = null;
+    if (insertAttrs !== null) {
+        const attrs = splitRefs(insertAttrs);
+        map = {};
+        for (const attr of attrs) {
+            map[attr] = el.getAttribute(attr);
+        }
+    }
+    return {
+        elFragment, map
+    };
+}
+export function clone(matchingElement, elFragment, map) {
+    const fragmentClone = elFragment.cloneNode(true);
+    matchingElement.replaceChildren(fragmentClone);
+    if (map !== null) {
+        for (const key in map) {
+            const value = map[key];
+            matchingElement.setAttribute(key, value);
+        }
+    }
+}

package/slotkin/affine.ts

@@ -0,0 +1,46 @@
+import {toQuery} from './toQuery.js';
+import {splitRefs} from '../refid/splitRefs.js';
+
+export function affine(fragment: DocumentFragment | Element, 
+    el: Element){
+    const qry = toQuery(el);
+    const {elFragment, map} = prep(el);
+    const matches = Array.from(fragment.querySelectorAll(qry));
+    for(const match of matches){
+        clone(match, elFragment, map);
+    }
+}
+
+export function prep(el: Element){
+    const elFragment = new DocumentFragment();
+    const clone = el.cloneNode(true);
+    for(const child of clone.childNodes){
+        elFragment.appendChild(child);
+    }
+    const insertAttrs = el.getAttribute('-i');
+    let map: {[key: string]: string} | null = null;
+    if(insertAttrs !== null){
+        const attrs = splitRefs(insertAttrs);
+        map = {};
+        for(const attr of attrs){
+            map[attr] = el.getAttribute(attr)!;
+        }
+    }
+    return {
+        elFragment, map
+    }
+}
+
+export function clone(
+    matchingElement: Element, 
+    elFragment: DocumentFragment, 
+    map: {[key: string]: string} | null){
+    const fragmentClone = elFragment.cloneNode(true) as DocumentFragment;
+    matchingElement.replaceChildren(fragmentClone);
+    if(map !== null){
+        for(const key in map){
+            const value = map[key]!;
+            matchingElement.setAttribute(key, value);
+        }
+    }
+}

package/slotkin/beKindred.js

@@ -1,30 +1,45 @@
 import { toQuery } from './toQuery.js';
-import { splitRefs } from '../refid/splitRefs.js';
+import { MountObserver } from '../MountObserver.js';
+import { prep, clone } from './affine.js';
+const previousObservers = new WeakMap();
 export function beKindred(fragment, el) {
+    if (!fragment.isConnected)
+        throw 'too soon, use affine';
     const qry = toQuery(el);
-    const matches = Array.from(fragment.querySelectorAll(qry));
-    const elFragment = new DocumentFragment();
-    const clone = el.cloneNode(true);
-    for (const child of clone.childNodes) {
-        elFragment.appendChild(child);
-    }
-    const insertAttrs = el.getAttribute('-i');
-    let map = null;
-    if (insertAttrs !== null) {
-        const attrs = splitRefs(insertAttrs);
-        map = {};
-        for (const attr of attrs) {
-            map[attr] = el.getAttribute(attr);
+    const previousObserversOfFragment = previousObservers.get(fragment);
+    if (previousObserversOfFragment !== undefined) {
+        const staleObservers = previousObserversOfFragment.filter(x => el.matches(x[0]));
+        const nonStaleObservers = previousObserversOfFragment.filter(x => !el.matches(x[0]));
+        if (staleObservers !== undefined && staleObservers.length > 0) {
+            for (const staleObserver of staleObservers) {
+                staleObserver[1].disconnect(fragment);
+            }
         }
+        previousObservers.set(fragment, nonStaleObservers);
     }
-    for (const match of matches) {
-        const fragmentClone = elFragment.cloneNode(true);
-        match.replaceChildren(fragmentClone);
-        if (map !== null) {
-            for (const key in map) {
-                const value = map[key];
-                match.setAttribute(key, value);
+    const { elFragment, map } = prep(el);
+    const mo = new MountObserver({
+        on: qry,
+        do: {
+            mount: (matchingElement) => {
+                clone(matchingElement, elFragment, map);
+                // const fragmentClone = elFragment.cloneNode(true) as DocumentFragment;
+                // matchingElement.replaceChildren(fragmentClone);
+                // if(map !== null){
+                //     for(const key in map){
+                //         const value = map[key]!;
+                //         matchingElement.setAttribute(key, value);
+                //     }
+                // }
             }
         }
+    });
+    mo.observe(fragment);
+    if (previousObservers.has(fragment)) {
+        previousObservers.get(fragment).push([qry, mo]);
+    }
+    else {
+        previousObservers.set(fragment, [[qry, mo]]);
     }
+    return mo;
 }

package/slotkin/beKindred.ts

@@ -1,31 +1,55 @@
 import {toQuery} from './toQuery.js';
 import {splitRefs} from '../refid/splitRefs.js';
+import {MountObserver} from '../MountObserver.js';
+import {prep, clone} from './affine.js';
 
-export function beKindred(fragment: DocumentFragment | Element, el: Element){
+type OnMountObserver = [string, MountObserver];
+const previousObservers = new WeakMap<DocumentFragment | Element, Array<OnMountObserver>>();
+
+export function beKindred(
+    fragment: DocumentFragment | Element, 
+    el: Element,
+){
+    if(!fragment.isConnected) throw 'too soon, use affine';
     const qry = toQuery(el);
-    const matches = Array.from(fragment.querySelectorAll(qry));
-    const elFragment = new DocumentFragment();
-    const clone = el.cloneNode(true);
-    for(const child of clone.childNodes){
-        elFragment.appendChild(child);
-    }
-    const insertAttrs = el.getAttribute('-i');
-    let map: {[key: string]: string} | null = null;
-    if(insertAttrs !== null){
-        const attrs = splitRefs(insertAttrs);
-        map = {};
-        for(const attr of attrs){
-            map[attr] = el.getAttribute(attr)!;
+    const previousObserversOfFragment = previousObservers.get(fragment);
+    if(previousObserversOfFragment !== undefined){
+        const staleObservers = previousObserversOfFragment.filter(x => el.matches(x[0]));
+        const nonStaleObservers = previousObserversOfFragment.filter(x => !el.matches(x[0]));
+        if(staleObservers !== undefined && staleObservers.length > 0){
+            for(const staleObserver of staleObservers){
+                staleObserver[1].disconnect(fragment);
+            }
         }
+        previousObservers.set(fragment, nonStaleObservers);
     }
-    for(const match of matches){
-        const fragmentClone = elFragment.cloneNode(true) as DocumentFragment;
-        match.replaceChildren(fragmentClone);
-        if(map !== null){
-            for(const key in map){
-                const value = map[key]!;
-                match.setAttribute(key, value);
+
+
+
+    const {elFragment, map} = prep(el);
+
+    const mo = new MountObserver({
+        on: qry,
+        do: {
+            mount: (matchingElement) => {
+                clone(matchingElement, elFragment, map);
+                // const fragmentClone = elFragment.cloneNode(true) as DocumentFragment;
+                // matchingElement.replaceChildren(fragmentClone);
+                // if(map !== null){
+                //     for(const key in map){
+                //         const value = map[key]!;
+                //         matchingElement.setAttribute(key, value);
+                //     }
+                // }
             }
         }
+    });
+    mo.observe(fragment);
+    if(previousObservers.has(fragment)){
+        previousObservers.get(fragment)!.push([qry, mo]);
+    }else{
+        previousObservers.set(fragment, [[qry, mo]]);
     }
+    return mo;
+
 }

package/slotkin/wrap.js

@@ -0,0 +1,13 @@
+const wrapped = Symbol.for('50tzQZt95ECXUtHF7a40og');
+export function wrap(templ, base) {
+    const wasWrapped = templ[wrapped];
+    if (!wasWrapped) {
+        templ[wrapped] = true;
+        if (templ.content.childElementCount > 1) {
+            const start = document.createComment(base);
+            templ.content.prepend(start);
+            const end = document.createComment(`/${base}`);
+            templ.content.appendChild(end);
+        }
+    }
+}

package/slotkin/wrap.ts

@@ -0,0 +1,17 @@
+const wrapped = Symbol.for('50tzQZt95ECXUtHF7a40og');
+
+export function wrap(
+    templ: HTMLTemplateElement, 
+    base: string,
+){
+    const wasWrapped = (<any>templ)[wrapped];
+    if (!wasWrapped) {
+        (<any>templ)[wrapped] = true;
+        if (templ.content.childElementCount > 1) {
+            const start = document.createComment(base);
+            templ.content.prepend(start);
+            const end = document.createComment(`/${base}`);
+            templ.content.appendChild(end);
+        }
+    }
+}

package/ts-refs/be-inclusive/types.d.ts

@@ -1,16 +1,13 @@
 import {IEnhancement, BEAllProps} from '../trans-render/be/types';
-import { XForm } from "../trans-render/types";
+import {Specifier} from '../trans-render/dss/types';
 
-export interface EndUserProps<TProps, TMethods, TElement = {}> extends IEnhancement<HTMLTemplateElement>{
-    of: string,
-    xform: XForm<TProps, TMethods, TElement>,
-    initModel?: TProps & TMethods,
-    slotMap?: any,
+export interface EndUserProps<TProps, TMethods, TElement = {}> extends IEnhancement{
+    
 }
 
 export interface AllProps<TProps, TMethods, TElement = {}> extends EndUserProps<TProps, TMethods, TElement>{
-    isParsed?: boolean,
-    model?: TProps & TMethods,
+    includeRules: Array<IncludeRule>;
+    nodesToInclude: Array<Element>;
 }
 
 export type AP = AllProps<any, any, any>;
@@ -23,6 +20,11 @@ export type BAP = AP & BEAllProps;
 
 
 export interface Actions{
-    onInitModel(self: BAP): ProPAP;
-    startWeaving(self: BAP): ProPAP;
+    hydrate(self: BAP): Promise<PAP>;
+    include(self: BAP): void;
+}
+
+export interface IncludeRule {
+    remoteSpecifierString?: string,
+    remoteSpecifier: Specifier,
 }

package/ts-refs/mount-observer/types.d.ts

@@ -237,5 +237,7 @@ export type IshCtr = ({new() : Ishcycle}) | (() => Promise<{new() : Ishcycle}>);
 
 //#endregion
 
+export type RefType = '#' | '!';
+