mount-observer 0.0.81 → 0.0.82

package/Newish.js

@@ -1,6 +1,5 @@
 export { waitForEvent } from './waitForEvent.js';
 import { ObsAttr } from './ObsAttr.js';
-import { splitRefs } from './refid/splitRefs.js';
 import { getIsh } from './refid/getIsh.js';
 import { arr } from './refid/secretKeys.js';
 export const attached = Symbol.for('xyyspnstnU+CDrNVa0VnxA');
@@ -16,11 +15,11 @@ export class Newish {
         this.#options = options || { assigner: Object.assign };
         this.#ref = new WeakRef(enhancedElement);
     }
-    handleEvent() {
+    async handleEvent() {
         const enhancedElement = this.#ref.deref();
         if (!enhancedElement)
             return;
-        this.#attachItemrefs(enhancedElement);
+        await this.#attachItemrefs(enhancedElement);
     }
     async do() {
         const [enhancedElement, target, itemscope] = this.#args;
@@ -68,31 +67,26 @@ export class Newish {
             await ce['<mount>'](ce, enhancedElement, this.#options);
         }
         //attach any itemref references
-        this.#attachItemrefs(enhancedElement);
+        await this.#attachItemrefs(enhancedElement);
         const et = ObsAttr(enhancedElement, 'itemref');
         et.addEventListener('attr-changed', this);
         this.isResolved = true;
         return ce;
     }
-    #alreadyAttached = new Set();
-    #attachItemrefs(enhancedElement) {
+    #alreadyAttached = new WeakSet;
+    async #attachItemrefs(enhancedElement) {
         //TODO:  watch for already attached itemrefs to be removed and remove them from the set
         // and call outOfScopeCallback on them
         if ('<inScope>' in this.#ce && enhancedElement.hasAttribute('itemref')) {
-            const itemref = enhancedElement.getAttribute('itemref');
-            const itemrefList = splitRefs(itemref); // itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
-            if (itemrefList.length === 0)
-                return;
-            const rn = enhancedElement.getRootNode();
-            for (const id of itemrefList) {
-                if (this.#alreadyAttached.has(id))
+            await import('./refid/via.js');
+            const itemref = enhancedElement.via.itemref;
+            const refs = itemref.children;
+            for (const ref of refs) {
+                if (this.#alreadyAttached.has(ref))
                     continue;
-                const itemrefElement = rn.getElementById(id);
-                if (itemrefElement) {
-                    this.#ce['<inScope>'](this.#ce, itemrefElement, this.#options);
-                    this.#alreadyAttached.add(id);
-                }
+                this.#ce['<inScope>'](this.#ce, ref, this.#options);
             }
+            itemref.addEventListener('change', this);
         }
     }
     async #assignGingerly(fromDo) {

package/Newish.ts

@@ -24,10 +24,10 @@ export class Newish implements EventListenerObject {
         this.#options = options || {assigner: Object.assign};
         this.#ref = new WeakRef(enhancedElement);
     }
-    handleEvent(): void {
+    async handleEvent() {
        const enhancedElement = this.#ref.deref();
        if(!enhancedElement) return;
-       this.#attachItemrefs(enhancedElement);
+       await this.#attachItemrefs(enhancedElement);
     }
 
     async do(){
@@ -74,7 +74,7 @@ export class Newish implements EventListenerObject {
             await ce['<mount>'](ce, enhancedElement as HasIsh & Element, this.#options)
         }
         //attach any itemref references
-        this.#attachItemrefs(enhancedElement);
+        await this.#attachItemrefs(enhancedElement);
         const et = ObsAttr(enhancedElement, 'itemref');
         et.addEventListener('attr-changed', this);
         this.isResolved = true;
@@ -83,24 +83,21 @@ export class Newish implements EventListenerObject {
 
     
 
-    #alreadyAttached = new Set<string>();
+    #alreadyAttached = new WeakSet<Element>;
 
-    #attachItemrefs(enhancedElement: Element){
+    async #attachItemrefs(enhancedElement: Element){
         //TODO:  watch for already attached itemrefs to be removed and remove them from the set
         // and call outOfScopeCallback on them
         if('<inScope>' in (<any>this.#ce) && enhancedElement.hasAttribute('itemref')){
-            const itemref = enhancedElement.getAttribute('itemref')!;
-            const itemrefList = splitRefs(itemref);// itemref.split(' ').map((id) => id.trim()).filter((id) => id.length > 0);
-            if(itemrefList.length === 0) return;
-            const rn = enhancedElement.getRootNode() as Document | ShadowRoot;
-            for(const id of itemrefList){
-                if(this.#alreadyAttached.has(id)) continue;
-                const itemrefElement = rn.getElementById(id);
-                if(itemrefElement){
-                    (<any>this.#ce)['<inScope>'](this.#ce, itemrefElement, this.#options);
-                    this.#alreadyAttached.add(id);
-                }
+            await import('./refid/via.js');
+            const itemref = (<any>enhancedElement).via.itemref
+            const refs = itemref.children as Element[];
+            for(const ref of refs){
+                if(this.#alreadyAttached.has(ref)) continue;
+                (<any>this.#ce)['<inScope>'](this.#ce, ref, this.#options);
             }
+            itemref.addEventListener('change', this);
+
         }
 
     }

package/README.md

@@ -11,7 +11,7 @@ Author:  Bruce B. Anderson (with valuable feedback from @doeixd )
 
 Issues / pr's / polyfill:  [mount-observer](https://github.com/bahrus/mount-observer)
 
-Last Update: Dec 11, 2024
+Last Update: Aug 2, 2025
 
 ## Benefits of this API
 
@@ -444,7 +444,7 @@ The alternative to providing this feature, which I'm leaning towards, is to just
 
 ## Support for "donut hole scoping"
 
-While browsers are getting support for css based donut hole scoping, such support appears to be elusive for oElement.querySelectorAll(...) and oElement.matches(...).  In fact it is unclear how oElement.matches(...) would ever support it.  Such support would be quite useful. for microdata-based binding.
+While browsers are getting support for css based donut hole scoping, such support appears to be elusive for oElement.querySelectorAll(...) and oElement.matches(...).  In fact it is unclear to me how oElement.matches(...) would ever be able to support it.  Such support would be quite useful for microdata-based binding.
 
 Ideally, should this proposal be built into the browser, it would as a matter of course support donut hole scoping.
 
@@ -787,7 +787,7 @@ The thinking here is that longer roots indicate higher "specificity", so it is s
 
 ## Intra document html imports
 
-This proposal "sneaks in" one more feature, that perhaps should stand separately as its own proposal.  Because the MountObserver api allows us to attach behaviors on the fly based on css matching, and because the MountObserver would provide developers the "first point of contact" for such functionality, the efficiency argument seemingly "screams out" for this feature.
+This proposal "sneaks in" one more expansive feature, that perhaps should stand separately as its own proposal.  Because the MountObserver api allows us to attach behaviors on the fly based on css matching, and because the MountObserver would provide developers the "first point of contact" for such functionality, the efficiency argument seemingly "screams out" for this feature.
 
 Also, this proposal is partly focused on better management of importing resources "from a distance", in particular via imports carried out via http.  Is it such a stretch to look closely at scenarios where that distance happens to be shorter, i.e. found somewhere [in the document tree structure](https://github.com/tc39/proposal-module-expressions)?
 
@@ -801,7 +801,7 @@ The need for importing templates by id is also demonstrated by Corset's [Todo li
 }
 ```
 
-The mount-observer is always on the lookout for template tags with a src attribute starting with #:
+The mount-observer is always on the lookout for template tags with a src attribute starting with # (as well as url patterns):
 
 ```html
 <template src=#id-of-source-template></template>
@@ -840,9 +840,9 @@ Let's say the source template looks as follows:
    </div>
    <div>
       I don't know why you say 
-      <span part=greeting></span> 
+      <span part=parting></span> 
        I say 
-      <span part=parting></span>
+      <span part=greeting></span>
    </div>
 </template>
 ```
@@ -860,9 +860,9 @@ What we end up with is:
 </div>
 <div>
    I don't know why you say 
-   <span part=greeting>goodbye</span>
+   <span part=parting>goodbye</span>
     I say 
-   <span part=parting>hello</span>
+   <span part=greeting>hello</span>
 </div>
 <?-?>
 <div>Strawberry Fields Forever</div>
@@ -929,6 +929,84 @@ The discussion there leads to an open question whether a processing instruction
 
 The [add src attribute to template to load a template from file](https://github.com/whatwg/html/issues/10571) and an interesting proposal that is [coming from](https://github.com/htmlcomponents/declarative-shadow-imports/blob/main/examples/02-explainer-proposal/02-html.html) the Edge team [seem quite compatible](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md#proposal-inline-declarative-css-module-scripts) with this idea.
 
+## Applying DRY to templates. [WIP]
+
+Recall that with the previous examples, there was an implicit value of the rel attribute:
+
+```html
+<template src=#source-template rel=stream>
+   <span slot=slot1>hello</span>
+   <span slot=slot2>goodbye<span>
+</template>
+```
+
+Now we provide another scenario where we want to specify a different kind of use of the src attribute adorning the template element -- simply as a way of saying "here is a template to be used within this context as templates are traditionally used (for cloning reusable HTML), but the actual contents for the template is defined remotely (intra document or via http).
+
+My timing experiments indicate that it is faster to extract out all the needed template elements defined within a repeating template -- keep the contents that need repeated cloning lighter, and only clone fragments as needed from an external reference.
+
+```html
+<html>
+   <head>
+      <template id=directory>
+         My Shared Content
+      </template>
+   </head>
+   <body>
+      <div itemscope>
+         <template id=directoryConsumer rel=preload src=#directory></template>
+      </div>
+   </body>
+   <script type=module>
+      import {waitForEvent} from 'mount-observer/waitForEvent.js'
+      async function getContent(){
+         if(directoryConsumer.remoteContent) return directoryConsumer.remoteContents;
+         await waitForEvent(directoryConsumer, 'load');
+         return directoryConsumer.remoteContents;
+      }
+      await getContent(directoryConsumer)
+   </script>
+</html>
+```
+
+This can allow for elegant "lazy-loaded recursive" patterns:
+
+```html
+<html>
+   <head>
+      ...
+      <template id=dirs-files>
+        <ul itemscope=DirList itemprop=subDirs>
+            <li per-each="DirInfo of DirList">
+                <details>
+                    <summary itemprop=name></summary>
+                    <template 🎚️="on when ^{details}." 
+                        rel=preload src=#dirs-files></template>
+                </details>
+            </li>
+        </ul>
+        <ul itemscope=DirList itemprop=files>
+            <li per-each="FileInfo of DirList">
+                File: <span itemprop=name></span>
+                <button name=delete>Delete</button>
+            </li>
+        </ul>        
+    </template>
+    ...
+   </head>
+   <body>
+      ...
+      <button name=dirPick disabled>Pick directory</button>
+
+      <details itemscope=DirInfo data-kind="directory" 
+         when-resolved="@dirPick+📁⛏️ set $0?.ish?.handle to directoryHandle">
+         <summary itemprop=name></summary>
+         <template 🎚️="on when ^{details}." rel=preload src=#dirs-files></template>
+      </details>
+      ...
+   </body>
+</html>
+```
+
 ## Lazy Loading / Conditionally loading intra document imports [WIP specification]
 
 Just as it is useful to be able lazy load external imports when needed, it would also be useful to do the same for intra document HTML imports.  The most straightforward way this could be done seems to be as follows, either introducing some attribute like "type=conditional", or defining a new element that inherits from the HTMLTemplateElement, for example:
@@ -970,46 +1048,6 @@ Just as it is useful to be able lazy load external imports when needed, it would
 </compose>
 ```
 
-## Applying DRY to templates. [WIP]
-
-Recall that with the previous examples, there was an implicit value of the rel attribute:
-
-```html
-<template src=#source-template rel=stream>
-   <span slot=slot1>hello</span>
-   <span slot=slot2>goodbye<span>
-</template>
-```
-
-Now we provide another scenario where we want to specify a different kind of use of the src attribute adorning the template element -- simply as a way of saying "here is a template to be used within this context as templates are traditionally used (for cloning reusable HTML), but the actual contents for the template is defined remotely (intra document or via http).
-
-My timing experiments indicate that it is faster to extract out all the needed template elements defined within a repeating template -- keep the contents that need repeated cloning lighter, and only clone fragments as needed from an external reference.
-
-```html
-<html>
-   <head>
-      <template id=directory>
-         My Shared Content
-      </template>
-   </head>
-   <body>
-      <div itemscope>
-         <template id=directoryConsumer rel=preload src=#directory></template>
-      </div>
-   </body>
-   <script type=module>
-      import {waitForEvent} from 'mount-observer/waitForEvent.js'
-      async function getContent(){
-         if(directoryConsumer.remoteContent) return directoryConsumer.remoteContents;
-         await waitForEvent(directoryConsumer, 'load');
-         return directoryConsumer.remoteContents;
-      }
-      await getContent(directoryConsumer)
-   </script>
-</html>
-```
-
-
 
 ## Creating "frameworks" that revolve around MOSEs.
 
@@ -1084,5 +1122,112 @@ And we can give each inheriting ShadowRoot a personality of its own by customizi
 
 ## Creating an Element-To-RefID DOM passageway
 
+The platform provides some nice help with managing forms, including IDREF dependency support:
+
+```html
+<input id=field2 name=field2 form=myForm>
+
+<form id=myForm>
+   <input name="field1">
+</form>
+<script>
+   console.log(myForm.elements);
+   // includes both field1 and field2
+   console.log(field2.form)
+   // form#myForm
+</script>
+```
+
+This would be useful for other linkages as well, which the platform doesn't support currently.
+
+Again, because of the mount-observer being the "first point of contact" with the DOM, this is supported by mount-observer as well.
+
+```html
+<section id=section>
+   <div id=myDiv itemscope itemref="myID1 myID2">
+      <span itemprop=greeting></span>
+   </div>
+</section>
+...
+<div id=myId1>
+   <span itemprop=greeting2>hello</span>
+</div>
+<div id=myId2>...</div>
+<script>
+   console.log(myDiv.via.itemref.children);
+   // [div#myId1, div#myId2]
+   myDiv.via.itemref.addEventListener('change', e => {
+      console.log({e});
+      //{addedChildren, removedChildren}
+   });
+   console.log(myId2.via.itemref.parents); //TODO
+   const mo = new MountObserver({ //TODO
+      via: 'itemref.children',
+   });
+   mo.observe('#section');
+</script>
+```
+
+```html
+<span
+  id=mySpan
+  role="checkbox"
+  aria-checked="false"
+  tabindex="0"
+  aria-labelledby="tac tac2"></span>
+  ...
+<span id="tac">I agree to the Terms and Conditions.</span>
+
+<span id="tac2">I agree to the other Terms and Conditions.</span>
+<script>
+   console.log(mySpan.via.ariaLabelledby.children);
+   //[span#tac, span#tac2]
+
+   console.log(tac2.via.ariaLabelledby.parents);
+   //[span#mySpan]
+
+
+   mySpan.via.ariaLabelledby.addEventListener('change', e => {
+      console.log({e});
+      //{addedChildren, removedChildren}
+   });
+
+
+</script>
+```
+
+
+
+```html
+<table>
+   <thead>
+      ...
+   </thead>
+   <tbody id=myTbody>
+      <tr id=myTR1 data-parent-name=group1>
+         <td>hello</td>
+      <tr id=myTR2 data-parent-name=group1>
+         <td>goodbye</td>
+      </tr>
+      <tr id=myTR3 data-parent-name=group2>
+         <td>good morrow</td>
+      </tr>
+   </tbody>
+</table>
+<script>
+   console.log(myTbody.group.dataParentName.by.group1);
+   // [tr.myTR1, tr.myTR2]
+   myTbody.group.dataParentName.by.group1.addEventListener('change', e => {
+      {addedMember, removedMember}
+   });
+
+   console.log(myTR1.joinMatching.dataParentName.fromClosest.tbody);
+   // [tr#myTR1, tr#myTR2]
+   console.log(myTR1.joinMatching.dataParentName.fromParent);
+   // [tr#myTR1, tr#myTR2]
+   
+</script>
+```
+
 
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "mount-observer",
-  "version": "0.0.81",
+  "version": "0.0.82",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "devDependencies": {
-    "@playwright/test": "1.54.1",
+    "@playwright/test": "1.54.2",
     "ssi-server": "0.0.1"
   },
   "exports": {
@@ -53,14 +53,31 @@
       "default": "./waitForIsh.js",
       "types": "./waitForIsh.ts"
     },
+    "./refid/camelToKebab.js": {
+      "default": "./refid/camelToKebab.js",
+      "types": "./refid/camelToKebab.ts"
+    },
     "./refid/getAdjRefs.js": {
       "default": "./refid/getAdjRefs.js",
       "types": "./refid/getAdjRefs.ts"
     },
+    "./refid/joinMatching.js":{
+      "default": "./refid/joinMatching.js",
+      "types": "./refid/joinMatching.ts"
+    },
+    "./refid/refs.js": {
+      "default": "./refid/refs.js",
+      "types": "./refid/refs.ts"
+    },
     "./refid/regIsh.js": {
       "default": "./refid/regIsh.js",
-      "types": "./refid/regIsh.js"
+      "types": "./refid/regIsh.ts"
+    },
+    "./refid/via.js": {
+      "default": "./refid/via.js",
+      "types": "./refid/via.ts"
     },
+
     "./refid/splitRefs.js": {
       "default": "./refid/splitRefs.js",
       "types": "./refid/splitRefs.ts"

package/refid/camelToKebab.js

@@ -0,0 +1,4 @@
+const ctlRe = /(?=[A-Z])/;
+export function camelToKebab(s) {
+    return s.split(ctlRe).join('-').toLowerCase();
+}

package/refid/camelToKebab.ts

@@ -0,0 +1,4 @@
+const ctlRe = /(?=[A-Z])/;
+export function camelToKebab(s: string) {
+    return s.split(ctlRe).join('-').toLowerCase();
+}

package/refid/joinMatching.js

@@ -0,0 +1,56 @@
+import { camelToKebab } from './camelToKebab.js';
+const proxies = new WeakMap();
+Object.defineProperty(Element.prototype, 'joinMatching', {
+    get() {
+        if (!proxies.has(this)) {
+            const handler = {
+                get(target, prop) {
+                    const jm = new JoinMatching(target, prop);
+                    return jm;
+                },
+            };
+            proxies.set(this, new Proxy(this, handler));
+        }
+        return proxies.get(this);
+    },
+});
+export class JoinMatching {
+    #proxy;
+    elRef;
+    attr;
+    constructor(el, prop) {
+        this.elRef = new WeakRef(el);
+        this.attr = camelToKebab(prop);
+    }
+    get fromClosest() {
+        const handler = {
+            get(self, closestQry) {
+                const { elRef, attr } = self;
+                const el = elRef.deref();
+                if (el === undefined)
+                    return [];
+                const attrVal = el.getAttribute(attr);
+                const tryClosestQry = camelToKebab(closestQry);
+                let closest = el.closest(tryClosestQry);
+                if (closest === null)
+                    closest = el.closest(closestQry);
+                if (closest === null)
+                    throw 404;
+                return Array.from(closest.querySelectorAll(`[${attr}="${attrVal}"]`));
+                //console.log({self, closestQry, prop, el});
+            }
+        };
+        return new Proxy(this, handler);
+    }
+    get fromParent() {
+        const { elRef, attr } = this;
+        const el = elRef.deref();
+        if (el === undefined)
+            return [];
+        const { parentElement } = el;
+        if (parentElement === null)
+            return [];
+        const attrVal = el.getAttribute(attr);
+        return Array.from(parentElement.querySelectorAll(`[${attr}="${attrVal}"]`));
+    }
+}

package/refid/joinMatching.ts

@@ -0,0 +1,54 @@
+import {camelToKebab} from './camelToKebab.js';
+const proxies = new WeakMap<Element, ProxyConstructor>();
+Object.defineProperty(Element.prototype, 'joinMatching', {
+    get(){
+        if(!proxies.has(this)){
+            const handler = {
+                get(target: Element, prop: string) {
+                    const jm = new JoinMatching(target, prop);
+                    return jm;
+                },
+            }
+            proxies.set(this, new Proxy(this, handler));
+        }
+        return proxies.get(this);
+    },
+});
+
+export class JoinMatching {
+    #proxy: ProxyConstructor | undefined;
+    elRef: WeakRef<Element>;
+    attr: string;
+    constructor(el: Element, prop: string){
+        this.elRef = new WeakRef(el);
+        this.attr = camelToKebab(prop);
+    }
+
+    get fromClosest(){
+        const handler = {
+            get(self: JoinMatching, closestQry: string){
+                const {elRef, attr} = self;
+                const el = elRef.deref();
+                if(el === undefined) return [];
+                const attrVal = el.getAttribute(attr);
+                const tryClosestQry = camelToKebab(closestQry);
+                let closest = el.closest(tryClosestQry);
+                if(closest === null) closest = el.closest(closestQry);
+                if(closest === null) throw 404;
+                return Array.from(closest.querySelectorAll(`[${attr}="${attrVal}"]`))
+                //console.log({self, closestQry, prop, el});
+            }
+        }
+        return new Proxy(this, handler);
+    }
+
+    get fromParent(){
+        const {elRef, attr} = this;
+        const el = elRef.deref();
+        if(el === undefined) return [];
+        const {parentElement} = el;
+        if(parentElement === null) return [];
+        const attrVal = el.getAttribute(attr);
+        return Array.from(parentElement.querySelectorAll(`[${attr}="${attrVal}"]`));
+    }
+}

package/refid/via.js

@@ -0,0 +1,112 @@
+import { splitRefs } from './splitRefs.js';
+import { MountObserver } from '../MountObserver.js';
+import { camelToKebab } from './camelToKebab.js';
+const proxies = new WeakMap();
+const refLookup = new WeakMap();
+Object.defineProperty(Element.prototype, 'via', {
+    get() {
+        if (!proxies.has(this)) {
+            const handler = {
+                get(target, prop) {
+                    let lookup;
+                    if (refLookup.has(target)) {
+                        lookup = refLookup.get(target);
+                    }
+                    else {
+                        lookup = new Map();
+                        refLookup.set(target, lookup);
+                    }
+                    if (lookup.has(prop)) {
+                        return lookup.get(prop);
+                    }
+                    else {
+                        const refManager = new RefManager(target, prop);
+                        lookup.set(prop, refManager);
+                        return refManager;
+                    }
+                    //return Reflect.get(target, prop);
+                },
+            };
+            proxies.set(this, new Proxy(this, handler));
+        }
+        return proxies.get(this);
+    }
+});
+class RefManager extends EventTarget {
+    #el;
+    #children;
+    #attr;
+    //#parents: Array<WeakRef<Element>> | undefined;
+    constructor(el, prop) {
+        super();
+        this.#attr = camelToKebab(prop);
+        this.#el = new WeakRef(el);
+    }
+    get children() {
+        if (this.#children === undefined) {
+            const el = this.#el.deref();
+            if (el === undefined)
+                return [];
+            const attr = el.getAttribute(this.#attr);
+            if (!attr)
+                return [];
+            const refIds = splitRefs(attr);
+            const qry = refIds.map(id => `#${id}`).join(', ');
+            const rn = el.getRootNode();
+            const refsArr = Array.from(rn.querySelectorAll(qry));
+            const refs = new Map();
+            for (const ref of refsArr) {
+                refs.set(ref.id, new WeakRef(ref));
+            }
+            this.#children = refs;
+            const mo = new MountObserver({
+                on: qry,
+                do: {
+                    mount: (el) => {
+                        const id = el.id;
+                        if (id && !this.#children?.has(id)) {
+                            this.#children?.set(id, new WeakRef(el));
+                            this.dispatchEvent(new ChangeEvent([el], []));
+                        }
+                    },
+                    dismount: (el) => {
+                        const id = el.id;
+                        if (id && this.#children?.has(id)) {
+                            this.#children?.delete(id);
+                            this.dispatchEvent(new ChangeEvent([], [el]));
+                        }
+                    }
+                }
+            });
+            mo.observe(rn);
+            this.dispatchEvent(new ChangeEvent((refsArr), []));
+        }
+        return Array.from(this.#children?.values().map(ref => ref.deref()).filter(el => el !== undefined)) || [];
+    }
+    get parents() {
+        //for now, hold off on caching parents until a use case arises
+        //if(this.#parents === undefined){
+        const el = this.#el.deref();
+        if (el === undefined)
+            return [];
+        if (el.id === '')
+            return [];
+        const rn = el.getRootNode();
+        const qry = `[${this.#attr}~="${el.id}"]`;
+        const parents = Array.from(rn.querySelectorAll(qry));
+        //this.#parents = parents.map(parent => new WeakRef(parent));
+        return parents;
+        //}
+        //return this.#parents.map(ref => ref.deref()).filter(el => el !== undefined) || [];
+    }
+}
+export class ChangeEvent extends Event {
+    addedChildren;
+    removedChildren;
+    static eventName = 'change';
+    constructor(addedChildren, removedChildren) {
+        super(ChangeEvent.eventName);
+        this.addedChildren = addedChildren;
+        this.removedChildren = removedChildren;
+    }
+}

package/refid/via.ts

@@ -0,0 +1,111 @@
+import {splitRefs} from './splitRefs.js';
+import {MountObserver} from '../MountObserver.js';
+import {camelToKebab} from './camelToKebab.js';
+const proxies = new WeakMap<Element, ProxyConstructor>();
+const refLookup = new WeakMap<Element, RefLookup>();
+Object.defineProperty(Element.prototype, 'via', {
+    get(){
+        if(!proxies.has(this)){
+            const handler = {
+                get(target: Element, prop: string) {
+                    let lookup: RefLookup;
+                    if(refLookup.has(target)){
+                        lookup = refLookup.get(target)!;
+                    }else{
+                        lookup = new Map<attr, RefManager>();
+                        refLookup.set(target, lookup);
+                    }
+                    if(lookup.has(prop)){
+                        return lookup.get(prop);
+                    }else{
+                        const refManager = new RefManager(target, prop as string);
+                        lookup.set(prop, refManager);
+                        return refManager;
+                    }
+                    //return Reflect.get(target, prop);
+                },
+                
+            };
+            proxies.set(this, new Proxy(this, handler));
+        }
+        return proxies.get(this);
+    }
+});
+
+type attr = string;
+
+type RefLookup = Map<attr, RefManager>;
+
+class RefManager extends EventTarget {
+    #el: WeakRef<Element>;
+    #children: Map<string, WeakRef<Element>> | undefined;
+    #attr: string;
+    //#parents: Array<WeakRef<Element>> | undefined;
+    constructor(el: Element, prop: string){
+        super();
+        this.#attr = camelToKebab(prop);
+        this.#el = new WeakRef(el);
+    }
+    get children(){
+        if(this.#children === undefined){
+            const el = this.#el.deref();
+            if(el === undefined) return [];
+            const attr = el.getAttribute(this.#attr);
+            if(!attr) return [];
+            const refIds = splitRefs(attr);
+            const qry = refIds.map(id => `#${id}`).join(', ');
+            const rn = el.getRootNode() as DocumentFragment;
+            const refsArr = Array.from(rn.querySelectorAll(qry));
+            const refs = new Map<string, WeakRef<Element>>();
+            for(const ref of refsArr){
+                refs.set(ref.id, new WeakRef(ref));
+            }
+            this.#children = refs;
+            const mo = new MountObserver({
+                on: qry,
+                do: {
+                    mount: (el) => {
+                        const id = el.id;
+                        if(id && !this.#children?.has(id)){
+                            this.#children?.set(id, new WeakRef(el));
+                            this.dispatchEvent(new ChangeEvent([el], []));
+                        }
+                    },
+                    dismount: (el) => {
+                        const id = el.id;
+                        if(id && this.#children?.has(id)){
+                            this.#children?.delete(id);
+                            this.dispatchEvent(new ChangeEvent([], [el]));
+                        }
+                    }
+                }
+            });
+            mo.observe(rn);
+            this.dispatchEvent(new ChangeEvent((refsArr), []));
+        }
+        return Array.from(this.#children?.values().map(ref => ref.deref()).filter(el => el !== undefined)) || [];
+    }
+
+    get parents(){
+        //for now, hold off on caching parents until a use case arises
+        //if(this.#parents === undefined){
+            const el = this.#el.deref();
+            if(el === undefined) return [];
+            if(el.id === '') return [];
+            const rn = el.getRootNode() as DocumentFragment;
+            const qry = `[${this.#attr}~="${el.id}"]`;
+            const parents = Array.from(rn.querySelectorAll(qry));
+            //this.#parents = parents.map(parent => new WeakRef(parent));
+            return parents;
+        //}
+        //return this.#parents.map(ref => ref.deref()).filter(el => el !== undefined) || [];
+        
+    }
+}
+
+export class ChangeEvent extends Event {
+    static eventName = 'change';
+    constructor(public addedChildren: Array<Element>, public removedChildren: Array<Element>){ 
+        super(ChangeEvent.eventName);
+    }
+}

package/ts-refs/trans-render/froop/types.d.ts

@@ -192,7 +192,9 @@ export interface IshConfig<TProps = any, TActions = TProps, ETProps = TProps>{
     inScopeXForms?: {[key: CSSQuery]: XForm<TProps, TActions>};
     ishListCountProp?: keyof TProps & string;
     defaultIshList?: any[];
-    mapParentScopeRefTo?: keyof TProps & string; 
+    mapParentScopeRefTo?: keyof TProps & string;
+    //mapElTo?: keyof TProps & string; //make sure strong use case before implementing
+    ignoreItemProp?: boolean;
 }
 export interface OConfig<TProps = any, TActions = TProps, ETProps = TProps> extends IshConfig<TProps, TActions, ETProps>{
     mainTemplate?: string | HTMLTemplateElement;
@@ -440,7 +442,7 @@ export interface RoundaboutReady{
      * If truthy, can call await awake() before processing should resume
      * [TODO]
      */  
-    readonly sleep?: number,
+    readonly sleep?: number | undefined;
 
     awake(): Promise<void>;
 

package/upShadowSearch.ts

@@ -4,7 +4,7 @@ export function upShadowSearch(ref: Element, id: string){
         let test = rn.getElementById(id);
         if(test) return test;
         if(rn.host){
-            test = rn.host[id];
+            test = (<any>rn.host)[id];
             if(test instanceof HTMLElement) return test;
             rn = rn.host.getRootNode() as (DocumentFragment | ShadowRoot) & { host?: Element };
         }else if(rn === document){